摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,一个容器中包含个子元素居中显示定义层三角形的尺寸定义容器的尺寸画出层三角形定义动画效果最后,隐藏容器外的内容大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/zaqKPx
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cw9WzuV
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,一个容器中包含 3 个子元素:
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center,lightgreen, white); }
定义 3 层三角形的尺寸:
:root { --outer-w: 49em; --outer-h: 40em; --middle-w: 32em; --middle-h: 26em; --inner-w: 16em; --inner-h: 13em; }
定义容器的尺寸:
.vue { width: var(--outer-w); height: var(--outer-h); font-size: 8px; }
画出 3 层三角形:
.vue { position: relative; display: flex; justify-content: center; } .outer, .medium, .inner { position: absolute; border-style: solid; border-color: transparent; border-top-width: var(--h); border-top-color: var(--c); border-left-width: calc(var(--w) / 2); border-right-width: calc(var(--w) / 2); } .outer { --w: var(--outer-w); --h: var(--outer-h); --c: #42b883; /* aragon green */ } .middle { --w: var(--middle-w); --h: var(--middle-h); --c: #35495e; /* derk denim */ } .inner { --w: var(--inner-w); --h: var(--inner-h); --c: white; }
定义动画效果:
.outer, .middle, .inner { animation: animate 3s in ease-out infinite; } .middle { animation-delay: 0.1s; } .inner { animation-delay: 0.2s; } @keyframes animate { 0%, 5% { top: -100%; } 15%, 80% { top: 0; filter: opacity(1); transform: scale(1); } 90%, 100% { top: 100%; filter: opacity(0); transform: scale(0); } }
最后,隐藏容器外的内容:
.vue { overflow: hidden; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113437.html
摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,一个容器中包含个子元素居中显示定义层三角形的尺寸定义容器的尺寸画出层三角形定义动画效果最后,隐藏容器外的内容大功告成 showImg(https://segmentfault.com/img/bVbbQrP?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
阅读 3957·2021-11-22 15:31
阅读 2493·2021-11-18 13:20
阅读 2875·2021-11-15 11:37
阅读 6786·2021-09-22 15:59
阅读 716·2021-09-13 10:27
阅读 3721·2021-09-09 09:33
阅读 1414·2019-08-30 15:53
阅读 2544·2019-08-29 15:37