阅读量:3
以下是一个简单的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> <div class="marquee"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <span>Text 1</span> <span>Text 2</span> </div> </body> </html> 你可以将上述代码保存为一个HTML文件，并将image1.jpg、image2.jpg和Text 1、Text 2替换为你自己的图片和文字。此代码将创建一个水平滚动的跑马灯，图片和文字将从右侧滚动到左侧，然后重新开始。你还可以通过调整padding-right的值来调整图片或文字之间的间距。
