隨著互聯(lián)網技術的不斷進步，人們對于網頁設計的要求也越來越高，而文字動畫作為一種新穎的設計方式也越來越受到關注。那么如何用css制作文字動畫呢？接下來我們來一起探討一下。
.animated-text {
font-size: 50px;
font-weight: bold;
position: relative;
display: inline-block;
animation-name: moveText;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.animated-text span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
clip: rect(0, 0, 0, 0);
animation-name: revealText;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes moveText {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@keyframes revealText {
0% {
clip: rect(0, 0, 0, 0);
}
100% {
clip: rect(0, 100%, 100%, 0);
}
}首先，我們需要一個文本框，可以通過
或
標簽來創(chuàng)建。這里我使用的是
標簽，其class命名為”animated-text”。
接下來，我們給文本框添加樣式。其中，“position: relative”表示對文本框內部的子元素進行定位；“display: inline-block”表示讓文本框和文本在同一行上；“animation-name”和“animation-duration”用來指定動畫名稱和動畫持續(xù)時間；“animation-fill-mode”表示動畫結束后保持最后一幀的狀態(tài)；“animation-timing-function”表示動畫變化速度的函數。
然后，我們需要為文本框里的每個字添加一個子元素，這里使用標簽。我們?yōu)?span>添加樣式，“position: absolute”表示為絕對定位；“top: 0; left: 0; height: 100%; width: 100%;”表示將子元素的高度和寬度設置為覆蓋整個文本框；“clip: rect(0, 0, 0, 0);”表示將子元素隱藏（通過定義裁剪區(qū)域來隱藏），直到動畫觸發(fā)。
最后，我們用兩個@keyframes來定義動畫。其中，“moveText”動畫用于將整個文本框向上移動，“revealText”動畫用于逐漸展示出每個字（通過裁剪區(qū)域逐漸放大）。
以上就是用css制作文字動畫的基本教程，希望能幫助大家更好地設計頁面。