前端日常实践：6#视频演示如何用纯CSS绘制闪闪发光的钻石
时间：2023-04-05 14:46:49
HTML5
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/zhang-ou/pen/qYqwQp交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cp24VfV源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond代码解释定义了dom，容器中包含一个元素：
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；justify-content:center;}绘制第一组面的形状：.diamond{display:grid;}.diamondspan{border-width:50px;border-style:solid;}给第一组切面上色，因为后面会用到这些颜色值，所以定义一个变量：:root{--color1:deepskyblue;--color2：钢蓝；--color3：宝蓝色；--color4:dodgerblue;}.diamondspan{border-color:var(--color1)var(--color2)var(--color3)var(--color4);}添加3组facet到dom容器:
先将4组刻面组成matts，然后将其转换成菱形：.diamond{grid-template-columns:1fr1fr;变换：旋转（45度）；}.diamond跨度：第一个孩子{边框颜色：透明var(--color2)var(--color3)transparent;}定义动画效果：@keyframesanimate{0%{border-color:var(--color1)var(--color2)var(--color3)var(--color4);}25%{border-color:var(--color4)var(--color1)var(--color2)var(--color3);}50%{边框颜色：var(--color3)var(--color4)var(--color1)var(--color2);}75%{边框颜色：var(--color2)var(--color3)var(--color4)var(--color1);}100%{border-color:var(--color1)var(--color2)var(--color3)var(--color4);}}最后，将动画应用于第1组以外的方面：.diamondspan:not(:first-child){animation:animate2slinearinfinite;}大功告成！知识点变量https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variablesborder-widthhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-widthborder-颜色https://developer.mozilla.org/en-US/docs/Web/CSS/border-colorgrid-template-columnhttps://developer.mozilla.org/en-US/docs/Web/CSS/grid-模板列旋转（）https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
