效果预览

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

https://codepen.io/comehope/pen/qydvBm

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cD9pLTW

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 15 个元素:

<div class="flag">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

定义容器尺寸:

.flag {
width: 10em;
height: 15em;
font-size: 20px;
}

设置线条样式:

.flag span {
width: 0.25em;
height: inherit;
background-color: deepskyblue;
}

让线条平铺:

.flag {
display: flex;
justify-content: space-between;
}

增加 3d 透视效果:

.flag {
transform: perspective(500px) rotateY(-20deg);
}

定义左右移动的动画效果:

.flag span {
animation: wave 1.5s ease-in-out infinite alternate;
} @keyframes wave {
to {
transform: translateX(2em);
}
}

设置元素变量值:

.flag span:nth-child(1) {
--n: 1;
} .flag span:nth-child(2) {
--n: 2;
} /* 共 15 个元素,每元素的 --n 变量值等于它的序号。 */
/* 中间代码略 …… */ .flag span:nth-child(14) {
--n: 14;
} .flag span:nth-child(15) {
--n: 15;
}

让各线条分别延时启动动画,形成旗帜飘扬的效果:

.flag span {
animation-delay: calc(var(--n) * -0.1s);
}

最后,增加光影效果:

.flag span {
background-color: ghostwhite;
} @keyframes wave {
to {
transform: translateX(2em);
background-color: deepskyblue;
}
}

大功告成!

前端每日实战:77# 视频演示如何用纯 CSS 创作旗帜飘扬的动画的更多相关文章

  1. 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

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

  2. 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader

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

  3. 前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件

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

  4. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 2019.6.1 模拟赛——[ 费用流 ][ 数位DP ][ 计算几何 ]

    第一题:http://codeforces.com/contest/1061/problem/E 把点集分成不相交的,然后跑费用流即可.然而错了一个点. #include<cstdio> ...

  2. CLLocationManager在多线程下使用

    如果是子线程中创建CLLocationManager,那么startUpdatingLocation后是无法定位的,任何代理函数都不会被调用,而且表面上还会有提示是否定位的MessageBox,一切看 ...

  3. python中*args和**kargs得用法总结

    前言: 一个很简单的函数说起: def Jiafa(x, y): z = x + y return z print(Jiafa(1,2)) 这个很简单,一看就知道输出等于3. 那下一个问题是,如果我要 ...

  4. 实验四 《Android程序设计》

    实验四 <Android程序设计实验报告>-20175131王泽龙 实验四 Android程序设计-1 ①实验要求: Android Stuidio的安装测试:参考<Java和And ...

  5. (转)Java并发包:AtomicBoolean和AtomicReference

    转:https://blog.csdn.net/zxc123e/article/details/52057289 文章译自:http://tutorials.jenkov.com/java-util- ...

  6. Linux awk 命令 说明

    一. AWK 说明 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是l ...

  7. git设置忽略文件.gitignore

    在仓库目录下新建一个名为.gitignore的文件(因为是点开头,没有文件名,没办法直接在windows目录下直接创建,必须通过右键Git Bash,按照linux的方式来新建.gitignore文件 ...

  8. python 中for与else搭配使用

    先看一段程序: for i in range(10): if i == 5: print( 'found it! i = %s' % i) break else: print('not found i ...

  9. Dubbo 系列(07-5)集群容错 - Mock

    Dubbo 系列(07-5)集群容错 - Mock [toc] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 相关文档推荐: Dubbo 实战 - 服务降级 ...

  10. spring cloud学习--feign

    简单示例 增加feign maven依赖 <dependency> <groupId>org.springframework.cloud</groupId> < ...