HTML5+CSS3做一个超酷的文字滚动特效，案例不难，代码简单，知识点还是在CSS动画。
效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>超酷的文字滚动特效</title>
<link rel="stylesheet" href="../css/35.css">
</head>
<body>
<div class="container">
<div class="letter letter1">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span class="check">e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
<div class="letter letter2">
<span>a</span>
<span>b</span>
<span>c</span>
<span class="check">d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
<div class="letter letter3">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span class="check">g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
</div>
</body>
</html>
*{
/* 初始化 取消页面元素的内外边距 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
background: #f2be45;
/* 相对定位 */
position: relative;
/* 执行背景颜色变化动画：动画名 时长 线性的 停留在最后一帧 */
animation: changeBg 2.5s linear forwards;
}
.letter{
font-size: 160px;
font-weight: bold;
/* 转大写 */
text-transform: uppercase;
/* 绝对固定定位 */
position: fixed;
color: #725e82;
}
.letter span{
/* 弹性布局 水平、垂直居中 */
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 200px;
}
.letter.letter1{
left: calc(50% - 270px);
top: -400px;
/* 执行动画文字滚动动画：动画名 时长 加速后减速 */
animation: letter1Animate 2.5s ease-in-out;
}
.letter.letter2{
left: calc(50% - 90px);
top: -200px;
animation: letter2Animate 2.5s ease-in-out;
}
.letter.letter3{
left: calc(50% + 90px);
top: -800px;
animation: letter3Animate 2.5s ease-in-out;
}
.letter .check{
color: #f2be45;
}
/* 定义动画 */
/* 改变背景颜色 */
@keyframes changeBg {
0%{
background-color: #f2be45;
}
100%{
background-color: #725e82;
}
}
/* 第一个字母的滚动动画 */
@keyframes letter1Animate {
0%{
top: -2000px;
}
100%{
top: -400px;
color: #725e82;
}
}
/* 第二个字母的滚动动画 */
@keyframes letter2Animate {
0%{
top: -4000px;
}
100%{
top: -200px;
color: #725e82;
}
}
/* 第三个字母的滚动动画 */
@keyframes letter3Animate {
0%{
top: -3000px;
}
100%{
top: -800px;
color: #725e82;
}
}
