温馨提示×

Html跑马灯代码大全(图片文字移动代码)

小亿
653
2023-12-18 16:21:56
栏目: 编程语言

以下是一个简单的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.jpgimage2.jpgText 1Text 2替换为你自己的图片和文字。此代码将创建一个水平滚动的跑马灯,图片和文字将从右侧滚动到左侧,然后重新开始。你还可以通过调整padding-right的值来调整图片或文字之间的间距。

0