前端每日实战：6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

忘是亡心i 2022-02-27 15:38 162阅读 0赞

![图片描述][340431811-5b0f41adb0e29_articlex]

## 效果预览 ##

按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。

[https://codepen.io/zhang-ou/pen/qYqwQp][https_codepen.io_zhang-ou_pen_qYqwQp]

## 可交互视频教程 ##

**此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。**

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/c/cp24VfV][https_scrimba.com_c_cp24VfV]

## 源代码下载 ##

请从 github 下载。

[https://github.com/comehope/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond][https_github.com_comehope_front-end-daily-challenges_tree_master_006-blue-dazzling-diamond]

## 代码解读 ##

定义 dom，容器中包含一个元素：

居中显示：

html,
    body {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

画出第一组刻面的形状：

.diamond {
        display: grid;
    }
    
    .diamond span {
        border-width: 50px;
        border-style: solid;
    }

为第一组刻面上色，因为后面还要用到这些色值，所以定义了变量：

:root {
        --color1: deepskyblue;
        --color2: steelblue;
        --color3: royalblue;
        --color4: dodgerblue;
    }
    
    .diamond span {
        border-color: var(--color1) var(--color2) var(--color3) var(--color4);
    }

dom容器 中再增加3组刻面：

把4组刻面先组成田字格，再转换成钻石形状：

.diamond {
        grid-template-columns: 1fr 1fr;
        transform: rotate(45deg);
    }
    
    .diamond span:first-child {
        border-color: transparent var(--color2) var(--color3) transparent;
    }

定义动画效果：

@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);
        }
    }

最后，把动画效果应用到除第1组以外的刻面上：

.diamond span:not(:first-child) {
        animation: animate 2s linear infinite;
    }

大功告成！

## 知识点 ##

*  variables [https://developer.mozilla.org/en-US/docs/Web/CSS/Using\_CSS\_variables][https_developer.mozilla.org_en-US_docs_Web_CSS_Using_CSS_variables]
 *  border-width [https://developer.mozilla.org/en-US/docs/Web/CSS/border-width][https_developer.mozilla.org_en-US_docs_Web_CSS_border-width]
 *  border-color [https://developer.mozilla.org/en-US/docs/Web/CSS/border-color][https_developer.mozilla.org_en-US_docs_Web_CSS_border-color]
 *  grid-template-column [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns][https_developer.mozilla.org_en-US_docs_Web_CSS_grid-template-columns]
 *  rotate() [https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate][https_developer.mozilla.org_en-US_docs_Web_CSS_transform-function_rotate]

[340431811-5b0f41adb0e29_articlex]: /images/20220227/ac0532cb2be44da38d82c47e407ad734.png
[https_codepen.io_zhang-ou_pen_qYqwQp]: https://codepen.io/zhang-ou/pen/qYqwQp
[https_scrimba.com_c_cp24VfV]: https://scrimba.com/c/cp24VfV
[https_github.com_comehope_front-end-daily-challenges_tree_master_006-blue-dazzling-diamond]: https://github.com/comehope/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond
[https_developer.mozilla.org_en-US_docs_Web_CSS_Using_CSS_variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
[https_developer.mozilla.org_en-US_docs_Web_CSS_border-width]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
[https_developer.mozilla.org_en-US_docs_Web_CSS_border-color]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
[https_developer.mozilla.org_en-US_docs_Web_CSS_grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
[https_developer.mozilla.org_en-US_docs_Web_CSS_transform-function_rotate]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate