53.纯 CSS 创作一个文本淡入淡出的 loader 动画
原文地址:https://segmentfault.com/a/1190000015305861
感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的。
HTML code:
<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>
CSS code:
html, body, div{
margin:;
padding:;
/* 设置的宽高包括内外边距、边框、内容 */
box-sizing: border-box;
}
/* body子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}
/* 设置.loader容器样式 */
.loader{
position: relative;
width: 40em;
height: 3em;
/* border: 1px solid white; */
color: dodgerblue;
font-size: 1.5em;
font-family: sans-serif;
text-transform: uppercase;
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;
}
}
/* 给文字增加渐隐渐显动画 */
.loader span{
position: absolute;
height: 3em;
/* 有边框可以看出两侧如何旋转的
border: 1px solid white; */
animation: moving 2s linear infinite;
/* 设置动画延时,增强动画效果 */
animation-delay: calc((var(--n) - 10) * 0.25s);
/* 上面0.25没有带单位s导致元素叠加,编码不认真 */
}
.loader span:nth-child(1) {
--n:;
}
.loader span:nth-child(2) {
--n:;
}
.loader span:nth-child(3) {
--n:;
}
.loader span:nth-child(4) {
--n:;
}
.loader span:nth-child(5) {
--n:;
}
.loader span:nth-child(6) {
--n:;
}
.loader span:nth-child(7) {
--n:;
}
@keyframes moving{
0%{
filter: opacity(0);
/* 旋转 ,因为设置其多余高,所以旋转180度就出现两侧的不同水平线的动画*/
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:;
}
}
53.纯 CSS 创作一个文本淡入淡出的 loader 动画的更多相关文章
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
- 纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 ...
- 前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- inf 启动
How to install an INF file using Delphi If you need to install an "inf" file using Delphi, ...
- VarIsOrdinal,VarIsFloat,VarIsNumeric判断数字
VarIsOrdinal VarIsFloat VarIsNumeric 就三个. 第一个 是否int,boolean 第二个 是否Double,Simple,Curren ...
- 美剧黑名单的插曲《Jolene》
网易上有Slowdown 版本.<Jolene>Dolly Parton
- 生成OSIDAAuto.OPCServer失败
来源:https://pisquare.osisoft.com/message/13441 A failuare of generating OSIDAAuto.OPCServer dorislipe ...
- python的命令行参数处理
import argparse # A position argument func_choice = {'client' : 'client function', "server&qu ...
- Java序列化的理解与学习
1.什么是Java序列化 Java平台允许我们在内存中创建可复用的Java对象,但一般情况下,只有当JVM处于运行时,这些对象才可能存在,即,这些对象的生命周期不会比 JVM的生命周期更长.但在现实应 ...
- selenium python选取下拉框中的值
https://stackoverflow.com/questions/47689936/unable-to-scroll-and-select-desired-year-from-calender- ...
- 解决下载经过GZip压缩后的网页乱码问题
目前很多网站默认采用GZip压缩,如果不进行解压缩,下载后生成的html页面打开后会出现中文乱码 乱码前: string url = "http://quote.eastmoney.com/ ...
- ALGO-146_蓝桥杯_算法训练_4-2找公倍数
AC代码: #include <stdio.h> int main(void) { int i; ; i <= ; i ++) { == && i% == ) { p ...
- 以zookeeper为注册中心搭建spring cloud环境
在spring cloud体系中,有多种手段实现注册中心,本例中采用zookeeper作为注册中心的角色.服务提供者向zookeeper注册,服务消费者从zookeeper中发现服务提供者的相关信息, ...