前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/ERwpeG
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cED8KsK
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器是包含 7 个子元素,每个子元素中有一个字母:
<div class="loader">
<span>l</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
设置容器尺寸:
.loader {
width: 40em;
height: 3em;
}
设置文字样式:
.loader {
color: dodgerblue;
font-size: 1.5em;
text-transform: uppercase;
font-family: sans-serif;
}
给文字增加渐隐渐显动画:
.loader span {
animation: moving 2s linear infinite;
}
@keyframes moving {
0% {
filter: opacity(0);
}
33% {
filter: opacity(1);
}
66% {
filter: opacity(1);
}
100% {
filter: opacity(0);
}
}
设置动画延时,增强动画效果:
.loader span {
animation-delay: calc((var(--n) - 10) * 0.2s)
}
.loader span:nth-child(1) {
--n: 1;
}
.loader span:nth-child(2) {
--n: 2;
}
.loader span:nth-child(3) {
--n: 3;
}
.loader span:nth-child(4) {
--n: 4;
}
.loader span:nth-child(5) {
--n: 5;
}
.loader span:nth-child(6) {
--n: 6;
}
.loader span:nth-child(7) {
--n: 7;
}
设置文字旋转效果:
.loader {
position: relative;
}
.loader span {
position: absolute;
height: 3em;
}
@keyframes moving {
0% {
filter: opacity(0);
transform: rotate(-180deg);
}
33% {
filter: opacity(1);
transform: rotate(0deg);
}
66% {
filter: opacity(1);
transform: rotate(0deg);
}
100% {
filter: opacity(0);
transform: rotate(180deg);
}
}
增加文字移动的效果:
@keyframes moving {
0% {
filter: opacity(0);
transform: rotate(-180deg);
left: 100%;
}
33% {
filter: opacity(1);
transform: rotate(0deg);
left: 60%;
}
66% {
filter: opacity(1);
transform: rotate(0deg);
left: 40%;
}
100% {
filter: opacity(0);
transform: rotate(180deg);
left: 0;
}
}
增加文字变色效果:
.loader {
animation: change-color 10s linear infinite;
}
@keyframes change-color {
0% {
color: dodgerblue;
}
20% {
color: hotpink;
}
40% {
color: gold;
}
60% {
color: mediumpurple;
}
80% {
color: lightgreen;
}
100% {
color: dodgerblue;
}
}
最后,把可能出现在页面外的部分隐藏掉:
body {
overflow: hidden;
}
大功告成!
前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画的更多相关文章
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 53.纯 CSS 创作一个文本淡入淡出的 loader 动画
原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...
- 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...
- 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- bzoj 做起走 -- bzoj 1009 GT 考试
现在每次做一道bzoj上的题,整个人都感觉升华了... 先是在网上各种搜题解.要么只有代码,要么有点讲解看不懂,对于从来没有耐心看完别人代码的我,只能一篇一篇的翻..然后终于在某2011级同学的某段话 ...
- 20180704-Java开发环境配置
介绍如何搭建Java开发环境推荐:在Cloud Studio中运行Java程序 Java是一种跨平台的编程语言,想要让你的计算机能够运行Java程序那么就需要安装JRE,而想要开发Java程序,那么就 ...
- python中将12345转换为54321
#将12345转换为54321 a = 12345789 ret = 0 #当a不为零的时候,循环条件为true,执行语句块 while a : #对a求余数,第一次循环则把5求出来 last = a ...
- Charles抓取https
步骤一:将Charles的根证书(Charles Root Certificates)安装到Mac上. Help -> SSL Proxying -> Install Charles Ro ...
- Windows建立目录软连接
创建:mklink /j "I:\dst" "I:\src" 删除: rmdir "I:\dst"
- JAVA数组的toString()方法不能直接输出数组内容?
问题描述:我定义了一个类,类名是Job,当我输出Job.toString()是可以按我重载的toString方法输出的,但是如果输出jobs[]这个数组时,只会输出[Lmodel.Job;@45e22 ...
- python中w和wb文件写入的区别!
一:基本区别: w:是文本写入 wb:字节写入 windows中换行符是 \r\n w写入文件的时候,遇到 \n 自动替换成 \r\n
- mysql定时备份shell脚本
#!/bin/bash #每天早上4点, mysql备份数据 # backup.sh #crontab -e # * * * /home/erya/run/moniter/mysql_backup.s ...
- VS2017使用assimp 5.0.0 error C2589: '(' : illegal token on right side of '::' 解决办法
坑爹微软Sucks Again. assimp 终于更新到了5.0.0并且支持GLTF2格式,包含动画正确解析,在viewer中也能看到正确结果,真他喵的不容易,然后拿来编译完到自己项目里用,就出这玩 ...
- JSP基础--九大内置对象
JSP九大内置对象 Object findAttribute(String name):依次在page.request.session.application范围查找名称为name的数据,如果找到就停 ...