效果预览

在线演示

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

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. MySQL表完整性约束

    =======MySQL表完整性约束====== 目录: 一.介绍 二.not null 与 default 三.unique 四.primary key 五.auto_increment 六.for ...

  2. Python列表与元组

    一.列表 1.列表的介绍: 列表lst = [    ] 是python的基本数据类型之一,其他编程语言也有类似的数据类型,比如JS中的数组,java中的数组等等,它是以[]括起来,每个元素用逗号隔开 ...

  3. Mysql和oracle字段类型与java对象类型对应表收藏

    https://blog.csdn.net/michaelzhou224/article/details/16827029 Mysql Oracle Java BIGINT NUMBER(19,0) ...

  4. CSS——制作天天生鲜登陆页面

    这个登陆页面主要是有一个form表单,其他的和首页差不多的. login.html: <!DOCTYPE html> <html lang="en"> &l ...

  5. (转载)Python中模块的发布与安装

    模块(Module) Python中有一个概念叫做模块(module),这个和C语言中的头文件以及Java中的包很类似,比如在Python中要调用sqrt函数,必须用import关键字引入math这个 ...

  6. B. DZY Loves Modification

    B. DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  7. 【持续更新】Java 时间相关

    直接上代码: import java.util.*; import java.text.SimpleDateFormat; public class HelloWorld { public stati ...

  8. HTTP1.0工作原理

    1.HTTP工作原理 <HTTP响应报文与工作原理详解>讲的比较详细了. 2.示例 (1)server端程序如下: package org.yeyouluo.demo.jsp; impor ...

  9. String 对象详解

    原文地址:http://zangweiren.javaeye.com/blog/209895 作者:臧圩人(zangweiren) 网址:http://zangweiren.javaeye.com & ...

  10. asp页面无法访问,可尝试开始SQL Server等服务

    存在问题 asp页面的英文提示,翻译后为: "一个错误发生在服务器在处理URL.请联系系统管理员(管理人).如果您是系统管理员,请点击这里了解更多关于这个错误."   解决方案 请 ...