ky818smKy818sm  2023-11-27 08:27 123ppp资源网 隐藏边栏 |   抢沙发  4 
文章评分 0 次,平均分 0.0

几种实现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;
}

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

声明:如果本站发布的内容侵犯到您的权益,请通过邮件【[email protected]】联系本站,我们将及时删除!

发表评论

表情 格式 链接 私密 签到