发布时间：2025-12-11 01:40:44 浏览次数：2
以下是一个简单的HTML跑马灯代码,可以实现图片和文字的移动效果:
<!DOCTYPE html><html><head><style>.marquee { width: 100%; overflow: hidden; white-space: nowrap;}.marquee img,.marquee span { display: inline-block; padding-right: 50px; /* 调整图片或文字之间的间距 */ vertical-align: top; animation: marquee 10s linear infinite;}@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }}</style></head><body><p class="marquee"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <span>Text 1</span> <span>Text 2</span></p></body></html>你可以将上述代码保存为一个HTML文件,并将image1.jpg、image2.jpg和Text 1、Text 2替换为你自己的图片和文字。此代码将创建一个水平滚动的跑马灯,图片和文字将从右侧滚动到左侧,然后重新开始。你还可以通过调整padding-right的值来调整图片或文字之间的间距。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流