前端日常实战：28#视频演示了如何使用纯CSS绘制一个世界上不存在的彭罗斯三角形
时间：2023-04-05 19:55:57
HTML5
效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/RyvgMZ交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/czPkasr源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，一个容器包含3个：
居中展示：html,身体{高度:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器的大小：.penrose{width:20em;height:20em;}Draw3sidesContainer:.penrose{position:relative;}.penrosespan{position:absolute;宽度：100%；height:100%;}.penrosespan:nth-child(1){transform:rotate(0deg);}.penrosespan:nth-child(2){transform:rotate(120deg);}.penrosespan:nth-child(3){transform:rotate(240deg);}为3边所属的容器着色：.penrose{颜色：红色；}.penrose跨度{背景颜色：currentColor；}.penrose跨度：nth-??child(1){过滤器：亮度(1)；}.penrose跨度：nth-??child(2){过滤器：亮度（0.66);}.penrosespan:nth-child(3){filter:brightness(0.33);}使用遮罩裁剪每一边形成彭罗斯三角形：.penrosespan{clip-path:polygon(57%0,75%0,26%85%,89.5%85%,98.4%100%,0100%);}.penrosespan:nth-child(2){top:18.3%;左：43.3%；}.penrose跨度：第n个孩子（3）{上：46.5%；left:5.9%;}定义旋转动画效果：.penrose{animation:rotating30slinearinfinite;变换原点：66%66%；}@keyframes旋转{0%{变换：旋转（0度）；}100%{变换：旋转（360deg）；}}最后，添加旋转时改变颜色的效果：@keyframesrotating{0%{color:red;变换：旋转（0度）；}20%{颜色：黄色；}40%{颜色：石灰；}60%{颜色：蓝色；}80%{颜色：紫红色；}100%{颜色：红色；变换：旋转（720度）；}}你完成了！
