效果预览

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

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. html5 一些好用的原生事件

    计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展, 使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为 drag drop html5新增属性 某些操作使用拖拽比较方 ...

  2. 吴裕雄--天生自然python学习笔记:python 用firebase实现英文电子词典

    Firebase 版电子词典 学英语是许多 人一辈子的麻烦 . 所以本例中,我们开发一个英汉词典,用户执 行程序后,单击“翻译”按钮即可显示该单词的中文翻译 . 英汉词典标准版 因为这个案例的数据必须 ...

  3. 在VMware装了linux系统,如何在windows系统中用xshell连接

    网上有好几种方法,不过我觉得这种比较简单 1.找到VMware菜单  打开 编辑>虚拟网络编辑器 如图: 点下面的更改设置 点确定就可以了,什么都不用改.然后回到linux系统中ifconfig ...

  4. Distribution

    Random Variable \(\underline{cdf:}\)cumulative distribution function \(F(x)=P(X \leq x)\) \(\underli ...

  5. Caused by: java.io.FileNotFoundException: class path resource [../../resources/config/spring.xml] cannot be opened because it does not exist

    在尝试使用Spring的Test的时候遇到了这个错误 原来的代码: @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(loca ...

  6. python3多线程应用详解(第四卷:图解多线程中LOCK)

    先来看下图形对比: 发现没有这种密集型计算的任务中,多线程没有穿行的速率快,原因就是多线程在线程切换间也是要耗时的而密集型计算任务执行时几乎没以偶IO阻塞,这样你说谁快

  7. BigDecimal进行精确运算

    public class Test_1 { public static void main(String[] args) { System.out.println(0.06+0.01); System ...

  8. Qt QThread必须要了解的几个函数

    概述 如果想对Qt中的QThread有个更加深刻的了解,必须要知道这几个重要的函数,现在就一一介绍下. 函数介绍 属性 返回值 函数体 功能 static QThread * QThread::cur ...

  9. MAC地址和IP地址是否缺一不可

    答案是肯定的,我们来具体分析: 在网络传输的过程中,第一次将信息从A端发往B端时,首先在A端需要将信息从应用层开始到物理层进行逐层封装,到达B端后再从物理层到应用层进行逐层分用解包,最后拿到信息. 信 ...

  10. ZooKeeper基本讲解及使用

    本文摘录于:http://blog.51cto.com/tchuairen/1859494:https://blog.csdn.net/peace1213/article/details/525714 ...