css3：图片实现无缝滚动的效果(走马灯)

<style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}ul {/*因为是10张照片，所以ul的宽是2000px*/width: 2000px;animation: move 10s infinite linear;}.box {/*超出盒子的部分，隐藏*/overflow: hidden;width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;}.box li {float: left;}@keyframes move {to {/*7张图片正好全部走出盒子，留出来的空白部分，由后面那三张图片当替身补上*/transform: translateX(-1400px);}}.box ul:hover {/*鼠标经过li后，动画暂停*/animation-play-state: paused;}
</style>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!--多复制出三张图片当做"替身"--><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body>

css3：图片实现无缝滚动的效果(走马灯)相关推荐

CSS3 用动画实现无缝滚动图效果
如何用CSS实现一串图片在一个固定的盒子里无缝连接的滚动效果: 如上图(想象它是一个无缝连接的滚动图), 那么怎么才能这个无缝滚动的效果呢? 1.首先准备一组长宽一样图片, 六七个就差不多了, 然后创 ...
用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
html图片纵向无缝滚动,HTML内容或图片无缝滚动技巧
要让HTML页面的内容或图片实现无缝滚动,可以使用 marquee 这个简单的标签,不过这标签的最大问题就是不能首尾相连(无缝)滚动. 使用 DIV + JS 就可以轻松实现无缝滚动: 1) DIV代 ...
CSS3图片上下移动的动画效果
CSS3图片上下移动的动画效果开发工具与关键技术:Adobe Dreamweaver CC 2018 作者:昨夜星辰撰写时间:2019年1月17日下面我们使用Adobe Dreamweaver ...
常用的文字、图片的无缝滚动
1.文字的无缝向上滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:
SuperSlidev2.1 轮播图片和无缝滚动
使用方法,狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class=&q ...

css3：图片实现无缝滚动的效果(走马灯)

css3：图片实现无缝滚动的效果(走马灯)相关推荐

最新文章

热门文章