【CSS练习】如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

知识点

1. CSS网格布局
   将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）

• grid-template-columns 或者简写属性 grid
  该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。
  grid-template-columns: 100px 1fr;
• Fr
  新的 CSS 长度单位，用来创建有弹性尺寸的网格。
  It is a fractional unit and 1fr is for 1 part of the available space.

2. border-color
   用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

3.CSS选择器--排除
span:not(:first-child)

代码

        <style type="text/css">
           html, body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: navy;
           }
           :root {
            --color1: deepskyblue;
            --color2: steelblue;
            --color3: royalblue;
            --color4: dodgerblue;
           }
           .diamond {
            display: grid;
            grid-template-columns: 1fr 1fr;
            transform: rotate(45deg);
           }
           span {
            border-width: 50px;
            border-style: solid;
            border-color: var(--color1) var(--color2) var(--color3) var(--color4); 
           }
           span:first-child{
            border-color: transparent var(--color2) var(--color3) transparent;
           }
           span:not(:first-child){
            animation: animate 2s linear infinite;
           }
           @keyframes animate {
            0% {
                border-color: var(--color1) var(--color2) var(--color3) var(--color4);
            }
            25% {
                border-color: var(--color4) var(--color1) var(--color2) var(--color3);
            }
            50% {
                border-color: var(--color3) var(--color4) var(--color1) var(--color2);
            }
            75% {
                border-color: var(--color2) var(--color3) var(--color4) var(--color1);
            }
            100% {
                border-color: var(--color1) var(--color2) var(--color3) var(--color4);
            }
           }
        </style>

参考：https://segmentfault.com/a/1190000014652116