css3 跑马灯
#### 跑马灯动画效果
/* 使用@keyframes定义一个命名为marqueeAnimation的动画,使文本从右至左滚动 */ @keyframes marqueeAnimation { 0% { transform: translateX(100%); /* 起始状态,文本从容器的右边开始 */ } 100% { transform: translateX(-100%); /* 结束状态,文本完全从容器的左边滚出 */ } } /* 容器样式 */ .marquee-wrap { display: flex; /* 使用flex布局以确保文本垂直居中 */ background: #000; /* 黑色背景 */ height: 50px; /* 容器高度 */ line-height: 50px; /* 使文本垂直居中 */ color: #fff; /* 文本颜色为白色 */ overflow: hidden; /* 隐藏超出容器的内容 */ } /* 文本滚动样式 */ .marquee-content { width: 100%; /* 文本容器宽度 */ animation: marqueeAnimation 5s linear 0s infinite; /* 应用定义的跑马灯动画,持续时间为5秒,匀速,无延迟,循环播放 */ overflow: hidden; /* 隐藏超出的内容 */ }
HTML 结构
<section class="marquee-wrap"> <section class="marquee-content"> 3232323323232332323233232323323232332323233232323323232332323233232323----- </section> </section>
JavaScript 代码
// 获取跑马灯内容元素 let marqueeContent = document.getElementsByClassName('marquee-content')[0]; // 动态设置跑马灯的动画持续时间 marqueeContent.style.animationDuration = 3 * 0.2 + 10 + 's';实现一个简单的跑马灯效果。当页面加载时,文本将开始从右至左滚动。