摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/OELvrK
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cgnzMAz
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,一个名为 sky 的容器,其中包含一个 sun 元素和一个 moon 元素:
画出天空:
body { margin: 0; } .sky { width: 100vw; height: 100vh; background-color: skyblue; }
画出太阳:
.sky { display: flex; align-items: center; justify-content: center; position: relative; } .sun { position: absolute; width: 50vmin; height: 50vmin; border-radius: 50%; background-color: gold; }
画出月亮:
.moon { position: absolute; width: 50vmin; height: 50vmin; border-radius: 50%; background-color: slategray; transform: translateX(-55vmin); }
定义天空的变化,当日蚀来临时天空会变黑:
@keyframes animate-sky { 50% { background-color: black; } }
定义太阳的变化,当日蚀来临时太阳虽会被遮挡,但光晕仍会透出:
@keyframes animate-sun { 50% { box-shadow: 0 0 5em 1em white; } }
定义月亮的动画,当它运动到和太阳重叠的位置时,因为没有光,就看不到它的颜色了:
@keyframes animate-moon { from { transform: translateX(-100vmin); } 50% { background-color: black; } to { transform: translateX(100vmin); } }
把动画应用到元素上:
.sky, .sun, .moon { animation: 10s linear infinite; } .sky { animation-name: animate-sky; } .sun { animation-name: animate-sun; } .moon { animation-name: animate-moon; }
最后,隐藏滚动条:
.sky { overflow: hidden; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113391.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbboHk?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 2029·2023-04-25 19:15
阅读 2193·2021-11-23 09:51
阅读 1209·2021-11-17 09:33
阅读 2118·2021-08-26 14:15
阅读 2447·2019-08-30 15:54
阅读 1553·2019-08-30 15:54
阅读 2144·2019-08-30 12:50
阅读 1108·2019-08-29 17:08