文字逐个显隐加载效果

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

核心属性

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);
```
```
}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Ordering Disorder

Khoi Vinh / New Riders Press / 2010-12-03 / USD 29.99

The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds—from city planners to architects to typesetters and graphic artists. In recent years, web designers......一起来看看《Ordering Disorder》这本书的介绍吧!

码农工具

Base64 编码/解码

SHA 加密

SHA 加密工具

HSV CMYK 转换工具

HSV CMYK互换工具