html5动态文字特效代码

几种实现HTML5动态文字特效的代码:

/* 1. 文字闪烁特效 */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* 使用 animation 属性为文本应用闪烁特效 */
h1 {
animation: blink 2s ease-in-out infinite;
}
/* 2. 文字打字特效 */
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
/* 使用 animation 属性为文本应用打字特效 */
h2 {
animation: typing 3s steps(20, end);
}
/* 3. 文字滚动特效 */
/* 定义滚动动画 */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* 为文字容器设置 overflow: hidden，使文字超出部分不可见 */
div {
width: 300px;
overflow: hidden;
}
/* 使用 animation 属性为文本应用滚动特效 */
p {
animation: marquee 10s linear infinite;
}