跑马灯文字是一种特殊的排版方式，用于展示滚动的信息。如果加入动效，可以更加吸引人的眼球，常见于网站首页或广告展示等场景。本文将从以下几个方面详细介绍如何制作带动效的跑马灯文字。
一、使用CSS3动画制作跑马灯效果
利用CSS3的 animation 属性可以很方便的实现动画效果，结合使用 JavaScript 就可以做到跑马灯的效果。下面是一个示例：
.marquee-ct {
width: 500px;
height: 60px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}.marquee-item {
position: absolute;
top: 0;
height: 100%;
animation: marquee 12s linear infinite;
}.marquee-item:nth-of-type(1) {
animation-delay: 0s;
left: 0;
}.marquee-item:nth-of-type(2) {
animation-delay: 6s;
left: 500px;
}@keyframes marquee {
0% {
transform: translateX(0);
}100% {
transform: translateX(-500px);
}
}跑马灯文字1
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/284832.html
微信扫一扫 
支付宝扫一扫 