HTML5+CSS3做一個超酷的文字滾動特效，案例不難赁严，代碼簡單胜嗓，知識點(diǎn)還是在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>
*{
/* 初始化 取消頁面元素的內(nèi)外邊距 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
background: #f2be45;
/* 相對定位 */
position: relative;
/* 執(zhí)行背景顏色變化動畫：動畫名 時長 線性的 停留在最后一幀 */
animation: changeBg 2.5s linear forwards;
}
.letter{
font-size: 160px;
font-weight: bold;
/* 轉(zhuǎn)大寫 */
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;
/* 執(zhí)行動畫文字滾動動畫：動畫名 時長 加速后減速 */
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;
}
}
