摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,一个容器中包含个居中显示定义容器尺寸画出包含条边的容器为条边所属的容器上色用遮罩切出每一条边,组成彭罗斯三角形定义旋转动画效果最后,增加旋转时变色的效果大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/RyvgMZ
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/czPkasr
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,一个容器中包含 3 个 :
居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; }
定义容器尺寸:
.penrose { width: 20em; height: 20em; }
画出包含 3 条边的容器:
.penrose { position: relative; } .penrose span { position: absolute; width: 100%; height: 100%; } .penrose span:nth-child(1) { transform: rotate(0deg); } .penrose span:nth-child(2) { transform: rotate(120deg); } .penrose span:nth-child(3) { transform: rotate(240deg); }
为 3 条边所属的容器上色:
.penrose { color: red; } .penrose span { background-color: currentColor; } .penrose span:nth-child(1) { filter: brightness(1); } .penrose span:nth-child(2) { filter: brightness(0.66); } .penrose span:nth-child(3) { filter: brightness(0.33); }
用遮罩切出每一条边,组成彭罗斯三角形:
.penrose span { clip-path: polygon(57% 0, 75% 0, 26% 85%, 89.5% 85%, 98.4% 100%, 0 100%); } .penrose span:nth-child(2) { top: 18.3%; left: 43.3%; } .penrose span:nth-child(3) { top: 46.5%; left: 5.9%; }
定义旋转动画效果:
.penrose { animation: rotating 30s linear infinite; transform-origin: 66% 66%; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
最后,增加旋转时变色的效果:
@keyframes rotating { 0% { color: red; transform: rotate(0deg); } 20% { color: yellow; } 40% { color: lime; } 60% { color: blue; } 80% { color: fuchsia; } 100% { color: red; transform: rotate(720deg); } }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52376.html
摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,一个容器中包含个居中显示定义容器尺寸画出包含条边的容器为条边所属的容器上色用遮罩切出每一条边,组成彭罗斯三角形定义旋转动画效果最后,增加旋转时变色的效果大功告成 showImg(https://segmentfault.com/img/bVbbytm?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 3500·2021-08-02 13:41
阅读 2257·2019-08-30 15:56
阅读 1493·2019-08-30 11:17
阅读 1149·2019-08-29 15:18
阅读 546·2019-08-29 11:10
阅读 2637·2019-08-26 13:52
阅读 481·2019-08-26 13:22
阅读 2903·2019-08-23 15:41