首页走马灯代码

走马灯代码

时间: 2023-07-02 11:17:00 浏览: 105

以下是一个简单的走马灯代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>走马灯</title> <style> .container { width: 300px; height: 50px; overflow: hidden; position: relative; border: 1px solid black; } .marquee { position: absolute; top: 0; left: 100%; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { left: 100%; } 100% { left: -100%; } } </style> </head> <body> <div class="container"> <div class="marquee">这是一个走马灯效果，可以在这里添加需要滚动的内容。</div> </div> </body> </html> ``` 这个示例使用了 CSS3 的动画和 `overflow: hidden` 属性来实现走马灯效果。其中，`.container` 定义了容器的样式，设置了宽度、高度和边框。`.marquee` 定义了滚动内容的样式，设置了绝对定位和动画效果。`@keyframes` 定义了动画的关键帧，从容器的右侧开始滚动，直到滚到容器的左侧，然后再从右侧开始滚动，实现无限循环滚动的效果。

阅读全文