以下是一个简单的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="https://www.jirixiang.com/static/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" alt="Image 1"> <img src="https://www.jirixiang.com/static/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" 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的值来调整图片或文字之间的间距。

