溫馨提示×

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.jpg、image2.jpgText 1、Text 2替換為你自己的圖片和文字。此代碼將創建一個水平滾動的跑馬燈,圖片和文字將從右側滾動到左側,然后重新開始。你還可以通過調整padding-right的值來調整圖片或文字之間的間距。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女