以下是一個簡單的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
的值來調整圖片或文字之間的間距。