前端每日实战:123# 视频演示如何用纯 CSS 创作一架双冀飞机
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 片叶片,轮子左右各一只:
<div class="plane">
<div class="wings"></div>
<div class="fans">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="wheels">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
定义容器尺寸:
.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);
}
}
大功告成!
前端每日实战:123# 视频演示如何用纯 CSS 创作一架双冀飞机的更多相关文章
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...
- 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...
随机推荐
- 类似postman插件
Talend API Tester - Free Edition https://chrome.google.com/webstore/detail/talend-api-tester-free-ed ...
- mybatis处理LIKE模糊查询字符串拼接
-- 最佳实践 <select id="getSealByMap" parameterType="map" resultType="map&qu ...
- JavaScript中遍历数组,最好不要用for...in
先看一段代码 var arr = [2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(i,"类型:"+ty ...
- Django学习之模型层
模型层 查看orm内部sql语句的方法的方法 1.如果是queryset对象,那么可以点query直接查看该queryset的内部sql语句 2.在Django项目的配置文件中,配置一下参数即可实现所 ...
- Jsp入门EL表达式_学习笔记
1.EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > ...
- jQuery常用方法归纳总结
转自:http://segmentfault.com/a/1190000000660257 $.grep() $.grep( array, function(elementOfArray, index ...
- Pandas提取单元格的值
如提取第1行,第2列的值: df.iloc[[0],[1]] 则会返回一个df,即有字段名和行号. 如果用values属性取值: df.iloc[[0],[1]].values 返回的值会是列表,而且 ...
- 一、HTTP和HTTPS的基本概念
1HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. 2HT ...
- rpm方式安装MySQL后在命令行登录报错:ERROR 1045 (28000): Unknown error 1045
1.通过https://mirrors.tuna.tsinghua.edu.cn镜像源安装了MySQL5.7.22 rpm -ivh --force --nodeps https://mirrors. ...
- HAProxy此例简单介绍基于docker的HAProxy反代
HAProxy拓展连接 此例简单介绍基于Docker的HAProxy反代 反代: 1.获取haproxy镜像 docker pull haproxy 2.写配置文件haproxy.cfg 1 glo ...