摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。增加螺旋桨旋转的动画效果增加飞机飞行的动画效果再增加飞机旋转的动画效果大功告成
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/yxVYRL
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cmVLRc9
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中包含 3 个子元素,分别表示机冀、螺旋桨和轮子,机冀有 4 片叶片,轮子左右各一只:
定义容器尺寸:
.plane { width: 28em; height: 13em; font-size: 10px; }
定义子元素整体布局和共有属性:
.plane { display: flex; justify-content: center; position: relative; } .plane > * { position: absolute; } .plane > *::before, .plane > *::after { content: ""; position: absolute; }
定义基本色:
.plane { color: black; }
画出双冀:
.wings { width: inherit; display: flex; justify-content: center; } .wings::before { width: inherit; height: 0.5em; background-color: currentColor; } .wings::after { top: 4em; width: 90%; height: 0.4em; background-color: currentColor; }
画出螺旋桨的中心:
.fans { width: 11em; height: 11em; outline: 1px dashed; background: radial-gradient( black 2.5em, transparent 2.5em ); }
定义叶片的形状为半圆形:
.fans span { width: inherit; height: inherit; } .fans span::before { width: inherit; height: 50%; background-color: rgba(255, 255, 255, 0.4); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
分别旋转叶片的角度,使 4 个页片均匀分布在一个圆内:
.fans span::before { transform-origin: bottom; transform: rotate(calc((var(--n) - 1) * 90deg)); } .fans span:nth-child(1) { --n: 1; } .fans span:nth-child(2) { --n: 2; } .fans span:nth-child(3) { --n: 3; } .fans span:nth-child(4) { --n: 4; }
画出 2 个轮子:
.wheels { width: 16em; height: 2em; outline: 1px dashed; bottom: 0; display: flex; justify-content: space-between; } .wheels span { position: static; width: 1em; height: inherit; background-color: currentColor; border-radius: 0.5em; }
画出轮子的 2 个支架:
.wheels span { display: flex; justify-content: center; } .wheels span::before { width: 0.2em; height: 8em; background-color: currentColor; transform-origin: bottom; bottom: 1em; z-index: -1; } .wheels .left::before { transform: rotate(45deg); } .wheels .right::before { transform: rotate(-45deg); }
接下来制作动画效果。
增加螺旋桨旋转的动画效果:
.fans span { animation: fans-rotating 0.8s linear infinite; animation-delay: calc(var(--n) * 0.1s); } @keyframes fans-rotating { to { transform: rotate(-1turn); } }
增加飞机飞行的动画效果:
.plane { animation: fly 5s infinite; } @keyframes fly { 10%, 50%, 100% { top: 0; } 25% { top: 1em; } 75% { top: -1em; } }
再增加飞机旋转的动画效果:
.plane { animation: plane-rotating 10s infinite, fly 5s infinite; } @keyframes plane-rotating { 10%, 30%, 50% { transform: rotate(0deg); } 20% { transform: rotate(-4deg); } 80% { transform: rotate(8deg); } 100% { transform: rotate(-1turn); } }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113836.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。增加螺旋桨旋转的动画效果增加飞机飞行的动画效果再增加飞机旋转的动画效果大功告成 showImg(https://segmentfault.com/img/bVbgc89?w=400&h=302); 效果预览 按下右侧的点击预览按钮可以在当前页面预览...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月至年月发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读, 过往项目 2018 年 9 月份项目汇总(共 26 个项目) 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(...
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbibIK?w=400&h=301); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
阅读 1812·2021-09-22 15:55
阅读 3504·2021-09-07 10:26
阅读 602·2019-08-30 15:54
阅读 656·2019-08-29 16:34
阅读 825·2019-08-26 14:04
阅读 3230·2019-08-26 11:47
阅读 2114·2019-08-26 11:33
阅读 2277·2019-08-23 15:17