文字逐个显隐加载效果

栏目: Html · 发布时间: 7年前

核心属性

display: flex + justify-content: center + align-items: center 文字在页面中居中显示

animation + transform + animation-delay 文字逐个显隐的动画效果

```
<div class="start-screen">
```
```
<div class="loading">
```

<div class="loading__element el1">加</div>

<div class="loading__element el2">载</div>

<div class="loading__element el3">中</div>

<div class="loading__element el4">，</div>

```
</div>
```
```
<div class="loading">
```

<div class="loading__element el1">请</div>

<div class="loading__element el2">稍</div>

<div class="loading__element el3">候</div>

<div class="loading__element el4">.</div>

<div class="loading__element el5">.</div>

<div class="loading__element el6">.</div>

<div class="loading__element el7">.</div>

<div class="loading__element el8">.</div>

<div class="loading__element el9">.</div>

```
</div>
```
```
</div>
```

```
* {
```
```
margin: 0;
```
```
padding: 0;
```
```
border: 0;
```
```
box-sizing: border-box;
```
```
}
```
```
body {
```
```
background-color: #1fa2ed;
```
```
color: #fff;
```
```
}
```
```
.start-screen {
```
```
display: flex;
```
```
justify-content: center;
```
```
align-items: center;
```
```
flex-flow: nowrap column;
```
```
min-height: 100vh;
```
```
}
```
```
.loading {
```
```
display: flex;
```
```
margin: 24px 0;
```
```
}
```
```
.loading__element {
```
```
font: normal 100 1.5rem/1 "NSimSun";
```
```
letter-spacing: .5em;
```
```
}
```
```
[class*="el"] {
```
```
animation: bouncing 2s infinite ease;
```
```
}
```
```
.el1 {
```
```
animation-delay: 0.1s;
```
```
}
```
```
.el2 {
```
```
animation-delay: 0.2s;
```
```
}
```
```
.el3 {
```
```
animation-delay: 0.3s;
```
```
}
```
```
.el4 {
```
```
animation-delay: 0.4s;
```
```
}
```
```
.el5 {
```
```
animation-delay: 0.5s;
```
```
}
```
```
.el6 {
```
```
animation-delay: 0.6s;
```
```
}
```
```
.el7 {
```
```
animation-delay: 0.7s;
```
```
}
```
```
.el8 {
```
```
animation-delay: 0.8s;
```
```
}
```
```
.el9 {
```
```
animation-delay: 0.9s;
```
```
}
```
```
@keyframes bouncing {
```
```
0%, 100% {
```
```
transform: scale3d(1, 1, 1);
```
```
}
```
```
50% {
```
```
transform: scale3d(0, 0, 1);
```
```
}
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

数据资本时代

Viktor Mayer-Schnberger / 李晓霞、周涛 / 中信出版集团股份有限公司 / 2018-11-1 / CNY 58.00

【编辑推荐】大数据除了能对我们的生活、工作、思维产生重大变革外，还能够做什么？畅销书《大数据时代》作者舍恩伯格在新书《数据资本时代》中，展示了大数据将如何从根本上改变经济——这并不是因为数据是一种新型石油，而是因为数据是一种新型润滑脂，它将给市场带来巨大能量，给公司带来巨大压力，使金融资本的作用大大削弱。赢家是市场，而并非资本。这本书在当下国内出版，可以说恰逢其时。时下，中国经济正......一起来看看《数据资本时代》这本书的介绍吧!

码农工具

文字逐个显隐加载效果

核心属性

数据资本时代

JSON 在线解析

正则表达式在线测试

RGB CMYK 转换工具