本篇文章给大家带来的内容是关于如何使用纯CSS实现文本的淡入动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含若干子元素,每个子元素是 1 个字母:
h
a
p
p
y
h
o
l
i
d
a
y
s
居中显示:body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(pink, white, pink);
}
设置字体样式:.container span {
display: inline-block;
color: purple;
font-weight: bold;