CSS文本變換特效可以為網頁增添視覺效果和動態感。下面介紹幾種常見的文本變換特效。

/* 文字閃爍特效 */
.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 文字顏色漸變特效 */
.gradient {
background-image: linear-gradient(to right, #f6d365, #fda085);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* 文字打字特效 */
.typing {
overflow: hidden; /* 確保容器大小不變 */
animation: typing 3s steps(20) infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* 文字旋轉特效 */
.rotate {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是四種常見的CSS文字變換特效，可以根據需求在文本中添加對應的類名來實現相應的效果。