css 文字淡入动画
时间: 2023-11-30 16:39:16 浏览: 66
要实现CSS文字淡入动画,可以使用以下步骤:
1. 在HTML中创建一个容器元素,例如div,并在其中添加一个或多个span元素,每个span元素包含一个字母或单词。
2. 在CSS中,设置span元素的样式,包括字体样式、颜色、字体大小等。
3. 使用CSS动画属性,例如opacity和animation-delay,来设置文字的淡入效果。可以使用calc函数来计算每个span元素的动画延迟时间,以便实现逐个淡入的效果。
4. 最后,在body元素中设置背景颜色和居中样式,以便将文本放置在页面中央。
以下是一个示例代码,可以实现CSS文字淡入动画:
HTML代码:
```
<div class="container">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</div>
```
CSS代码:
```
.container {
text-align: center;
}
.container span {
display: inline-block;
color: purple;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.container span:nth-child(1) {
animation-delay: calc((var(--n) - 1) * 0.05s);
}
.container span:nth-child(2) {
animation-delay: calc((var(--n) - 2) * 0.05s);}
.container span:nth-child(3) {
animation-delay: calc((var(--n) - 3) * 0.05s);
}
.container span:nth-child(4) {
animation-delay: calc((var(--n) - 4) * 0.05s);
}
.container span:nth-child(5) {
animation-delay: calc((var(--n) - 5) * 0.05s);
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(pink, white, pink);
}
```