/* 文本阴影效果 */
text-shadow: 2px 2px 5px #888888;
/* 文本动画效果 */
@keyframes color-change {
0% {
color: red;
}
50% {
color: yellow;
}
100% {
color: blue;
}
}
h1 {
animation: color-change 2s infinite;
}
/* 文本渐变效果 */
background: linear-gradient(to right, #f0c6c6, #fff1c6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文本3D旋转效果 */
transform: perspective(500px) rotateY(30deg);
这些技巧可以用于标题、致辞、标语、引用等文本元素,为网页中的文本添加视觉效果,让它们更加生动有趣。