如何用纯 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;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015305861
如何用纯 CSS 创作一个文本淡入淡出的 loader 动画的更多相关文章
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 53.纯 CSS 创作一个文本淡入淡出的 loader 动画
原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...
- 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个行驶中的火车 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 ...
- 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
随机推荐
- Linux学习笔记——如何使用echo指令向文件写入内容
0.前言 本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符. echo向文件中输出内容 ...
- 基于JAVA的设计模式之组合模式
概念 将所有对象组合成一种树形结构,有分支节点.叶子节点,分支节点可以有自己的子节点,子节点可以是分支节点.叶子节点,可以进行增删的操作,而叶子节点不可以.比如文件夹就是一个分支节点,而文件就是一个叶 ...
- Jenkins任务失败,发送邮件通知
1.进入系统管理->系统设置,然后进行下面设置: 2.配置管理员邮件账号,需要和后面的邮件发送者一致.否则可能会发送不成功 3.配置基础的邮件发送的配置 4.配置邮件扩展配置--用来自定义邮件格 ...
- <转>Java 高并发综合
并发模型 悲观锁和乐观锁的理解及如何实现,有哪些实现方式? 悲观锁 悲观锁假设最坏的情况(如果你不锁门,那么捣蛋鬼就会闯入并搞得一团糟),并且只有在确保其他线程不会干扰(通过获取正确的锁)的情况下才能 ...
- MySQL如何找出未提交事务信息
前阵子,我写了一篇博客"ORACLE中能否找到未提交事务的SQL语句", 那么在MySQL数据库中,我们能否找出未提交事务执行的SQL语句或未提交事务的相关信息呢? 实验验证了一下 ...
- LR脚本示例之URL请求(post、get)
Action(){ //application/x-www-form-urlencoded //application/json //web_add_auto_header("Content ...
- 似水流年 ? Chrome调试大全
http://www.360doc.com/content/12/1107/20/7851074_246467307.shtml 作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多 ...
- myeclipes出现{Could not create the view: An unexpected except
今天编写代码的时候突然出现了web工程不能部署的情况,后面了解到主要是因为那个myeclipse非正常关闭或者突然断电的情况,我的是属于第一种的,下面整理一下这个解决方法 1.关闭myeclipse ...
- 【Python图像特征的音乐序列生成】关于小样本的一些思考
我之前就注意到,深度学习和音乐结合,尤其是从乐理出发进行结合(而不是纯粹的进行音乐生成),是一个尚未被深度挖掘的全新领域.可想而知,这个方向符合我要求的数据肯定是要自己搜集了. 自己搜集的数据,在量上 ...
- Linq语法学习_增删篇。
关键词: select from where in into join on equals orderby descending thenby Table<TEntity> Default ...