首页用js 写一个跑马灯效果

用js 写一个跑马灯效果

时间: 2024-05-14 10:11:57 浏览: 147

以下是一个简单的跑马灯效果的JavaScript代码： ```html <!DOCTYPE html> <html> <head> <title>跑马灯效果</title> <style> #container { width: 200px; height: 50px; overflow: hidden; background-color: #ccc; position: relative; } #content { position: absolute; top: 0; left: 0; height: 50px; line-height: 50px; padding-left: 200px; background-color: #fff; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div id="container"> <div id="content"> 这是一个跑马灯效果的演示！ </div> </div> </body> </html> ``` 解释： 1. 首先创建一个`div`容器，设置其宽度和高度，并将溢出部分隐藏起来，以实现内容滚动的效果。 2. 在容器内部创建一个`div`，设置其样式，包括绝对定位、高度、行高、向左的内边距和背景色。 3. 使用CSS3的`@keyframes`规则定义一个名为`marquee`的动画，实现将内容向左平移的效果。其中，`transform: translateX(-100%);`表示将内容向左平移整个容器的宽度。 4. 将动画应用到`content`元素上，使其在10秒钟内无限循环播放。

阅读全文