效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

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 创作一架双冀飞机的更多相关文章

  1. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  2. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  3. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

  4. 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...

  5. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  6. 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

  7. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  8. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

  9. 前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...

随机推荐

  1. 类似postman插件

    Talend API Tester - Free Edition https://chrome.google.com/webstore/detail/talend-api-tester-free-ed ...

  2. mybatis处理LIKE模糊查询字符串拼接

    -- 最佳实践 <select id="getSealByMap" parameterType="map" resultType="map&qu ...

  3. JavaScript中遍历数组,最好不要用for...in

    先看一段代码 var arr = [2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(i,"类型:"+ty ...

  4. Django学习之模型层

    模型层 查看orm内部sql语句的方法的方法 1.如果是queryset对象,那么可以点query直接查看该queryset的内部sql语句 2.在Django项目的配置文件中,配置一下参数即可实现所 ...

  5. Jsp入门EL表达式_学习笔记

    1.EL表达式 [1] 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > ...

  6. jQuery常用方法归纳总结

    转自:http://segmentfault.com/a/1190000000660257 $.grep() $.grep( array, function(elementOfArray, index ...

  7. Pandas提取单元格的值

    如提取第1行,第2列的值: df.iloc[[0],[1]] 则会返回一个df,即有字段名和行号. 如果用values属性取值: df.iloc[[0],[1]].values 返回的值会是列表,而且 ...

  8. 一、HTTP和HTTPS的基本概念

    1HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. 2HT ...

  9. rpm方式安装MySQL后在命令行登录报错:ERROR 1045 (28000): Unknown error 1045

    1.通过https://mirrors.tuna.tsinghua.edu.cn镜像源安装了MySQL5.7.22 rpm -ivh --force --nodeps https://mirrors. ...

  10. HAProxy此例简单介绍基于docker的HAProxy反代

    HAProxy拓展连接 此例简单介绍基于Docker的HAProxy反代 反代: 1.获取haproxy镜像  docker pull haproxy 2.写配置文件haproxy.cfg 1 glo ...