效果预览

在线演示

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

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 动画的更多相关文章

  1. 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

  2. 53.纯 CSS 创作一个文本淡入淡出的 loader 动画

    原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...

  3. 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

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

  4. 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

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

  5. 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

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

  6. 如何用纯 CSS 创作一个行驶中的火车 loader

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

  7. 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader

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

  8. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

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

  9. 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

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

随机推荐

  1. Linux学习笔记——如何使用echo指令向文件写入内容

    0.前言     本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符.     echo向文件中输出内容 ...

  2. 基于JAVA的设计模式之组合模式

    概念 将所有对象组合成一种树形结构,有分支节点.叶子节点,分支节点可以有自己的子节点,子节点可以是分支节点.叶子节点,可以进行增删的操作,而叶子节点不可以.比如文件夹就是一个分支节点,而文件就是一个叶 ...

  3. Jenkins任务失败,发送邮件通知

    1.进入系统管理->系统设置,然后进行下面设置: 2.配置管理员邮件账号,需要和后面的邮件发送者一致.否则可能会发送不成功 3.配置基础的邮件发送的配置 4.配置邮件扩展配置--用来自定义邮件格 ...

  4. <转>Java 高并发综合

    并发模型 悲观锁和乐观锁的理解及如何实现,有哪些实现方式? 悲观锁 悲观锁假设最坏的情况(如果你不锁门,那么捣蛋鬼就会闯入并搞得一团糟),并且只有在确保其他线程不会干扰(通过获取正确的锁)的情况下才能 ...

  5. MySQL如何找出未提交事务信息

    前阵子,我写了一篇博客"ORACLE中能否找到未提交事务的SQL语句", 那么在MySQL数据库中,我们能否找出未提交事务执行的SQL语句或未提交事务的相关信息呢? 实验验证了一下 ...

  6. LR脚本示例之URL请求(post、get)

    Action(){ //application/x-www-form-urlencoded //application/json //web_add_auto_header("Content ...

  7. 似水流年 ? Chrome调试大全

    http://www.360doc.com/content/12/1107/20/7851074_246467307.shtml   作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多 ...

  8. myeclipes出现{Could not create the view: An unexpected except

    今天编写代码的时候突然出现了web工程不能部署的情况,后面了解到主要是因为那个myeclipse非正常关闭或者突然断电的情况,我的是属于第一种的,下面整理一下这个解决方法 1.关闭myeclipse ...

  9. 【Python图像特征的音乐序列生成】关于小样本的一些思考

    我之前就注意到,深度学习和音乐结合,尤其是从乐理出发进行结合(而不是纯粹的进行音乐生成),是一个尚未被深度挖掘的全新领域.可想而知,这个方向符合我要求的数据肯定是要自己搜集了. 自己搜集的数据,在量上 ...

  10. Linq语法学习_增删篇。

    关键词: select from where in into join on equals orderby descending thenby Table<TEntity> Default ...