css文字动效 |css黑白效果

/* 字体渐变动效 */
.gradient-text {
background-color: #000;
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
/* 静止文字中添加动态效果 */
.static-text:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
background: #000;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
clip-path: inset(0 0 0 100%);
animation: static 4s infinite;
}
@keyframes static {
0%,
100% {
clip-path: inset(0 0 0 100%);
}
50% {
clip-path: inset(0 0 0 0);
}
}
/* 带光标的打字效果 */
.typewriter-text {
overflow: hidden;
border-right: 0.15em solid orange;
white-space: nowrap;
letter-spacing: 0.15em;
animation: 2s blink-caret infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: orange;
}
}

除了以上几种常见的文字动效，CSS还有更多酷炫的文字动效可以实现，开发者们可以结合实际需求灵活运用。