效果预览

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

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

  1. 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Python 爬虫实战(1):分析豆瓣中最新电影的影评

    目标总览 主要做了三件事: 抓取网页数据 清理数据 用词云进行展示 使用的python版本是3.6 一.抓取网页数据 第一步要对网页进行访问,python中使用的是urllib库.代码如下: from ...

  2. Jenkins搭建(by tomcat)

    Jenkins官网https://jenkins.io/download/下载最新版本jenkins.war 把jenkins.war放到tomcat-jenkins的webapps下 修改tomca ...

  3. 心形陀螺案例css3

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  4. RESTful再理解

    目录 目录 前言 RESTful的目的 REST的含义 表现层 状态转化 无状态协议HTTP 最后 前言 这是在经过一段时间的积累后,对RESTFul框架的再一次更深入的理解.希望能够将零散的知识点连 ...

  5. PTA 1121 Damn Single

    题目链接:1121 Damn Single (25 分) "Damn Single (单身狗)" is the Chinese nickname for someone who i ...

  6. Vue CLI UI:Vue开发者必不可少的工具

    突然发现一个Vue cli 比较好用的工具,一个可视化图形界面方便你去创建.更新和管理Vue项目.这里分享2个作者写得比较好的文章 https://codeseeding.com/portal.php ...

  7. CentOS7和Ubuntu18.10下运行Qt Creator出现cannot find -lGL的问题的解决方案

    解决方法:缺少相应的opengl的库,需要安装opengl库 一.Ubuntu下解决Qt5.11.1 cannot find -lGL 有两种原因: 一种是没有按照libGL库,那么就安装: sudo ...

  8. spring容器的启动过程

    spring的启动过程: 首先,对于一个web应用,其部署在web容器中,web容器提供其一个全局的上下文环境,这个上下文就是ServletContext,其为后面的spring IoC容器提供宿主环 ...

  9. tp增删改查

    增: 向数据库增加新的数据,这里增是纯粹的增添数据,如果新增的数据包含主键,并且该主键已经在数据库存在,则无法新增数据的. //M("User") 用于高效实例化一个数据模型(M ...

  10. Spring学习(四)--面向切面的Spring

    一.Spring--面向切面 在软件开发中,散布于应用中多处的功能被称为横切关注点(cross- cutting concern).通常来讲,这些横切关注点从概念上是与应用的业 务逻辑相分离的(但是往 ...