Html跑马灯代码大全(图片文字移动代码)-开发者知识库平台

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

html

1731

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

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

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

最新知识库

相关标签