css文本动画 |css伪类选择器before

/* 1. 基本的文字闪烁动画 */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* 将动画应用于元素 */
h1 {
animation: blink 1s infinite;
}
/* 2. 文字颜色变化动画 */
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: green; }
}
/* 将动画应用于元素 */
p {
animation: color-change 3s infinite;
}
/* 3. 文本旋转动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 将动画应用于元素 */
div {
animation: rotate 2s infinite;
}
/* 4. 文本扭曲动画 */
@keyframes warp {
0% { transform: skew(-20deg, 0); }
50% { transform: skew(20deg, 0); }
100% { transform: skew(-20deg, 0); }
}
/* 将动画应用于元素 */
span {
animation: warp 3s infinite;
}

这些示例只是CSS文本动画中的一小部分。使用这些技术，您可以创建各种各样的动画效果，从简单的渐变到复杂的形状变化。不过，请记住，过多的动画效果可能会使您的网站变得混乱，影响用户体验。