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

   2025-02-13 4080
核心提示:以下是一个简单的HTML跑马灯代码,可以实现图片和文字的移动效果:!DOCTYPE htmlhtmlheadstyle.marquee {width: 100%;overflow:

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

 
 
更多>同类维修知识
推荐图文
推荐维修知识
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  网站留言