CSS3 用动画实现无缝滚动图效果
如何用CSS实现一串图片在一个固定的盒子里无缝连接的滚动效果:
如上图(想象它是一个无缝连接的滚动图), 那么怎么才能这个无缝滚动的效果呢?
1.首先准备一组长宽一样图片, 六七个就差不多了, 然后创建一个盒子,给这个盒子设置宽高(宽度尽量和图片一致,避免图片被拉伸, 宽度取决于你想让你个图片同时出现在视线内)
如上图, 我设置的是让这个盒子居于屏幕中心, 然后给了宽高和边框
2.在盒子里添加ul li标签(记得去除样式) 每个li标签里放入一张图片 然后让li标签浮起来(float:left) ,
给li设置宽高,并且让图片的宽高等于li的100%
此时效果如上图
3.给ul设置宽度,让li能排成一排, 宽度为所有li宽度之和
创造一个动画效果, 给ul添加 让这串图片朝左匀速循环运动
图中transform:translateX(1400px)是朝X轴负方向移动1400px(图片宽度之和)
run是我设的动画名, 2s是动画时长, linear是匀速运动, infinite是无限循环
4.如下图所示, 图片是循环滚动起来了 但是中间仍有缝隙
这是因为ul的长度为所有图片的宽度,为了让所有的图片能全部移动一遍, 动画设置位移的长度得等于所有图片的长度. 当所有图片向左移动时,最后一个图片完全移出方框后,这个动画才算完成. 所以才会有三个图片大小的空白档 (三个图片的空白档是因为我想要这个框框能同时显示三个图片, 所以把框框宽度设置为三个图片的宽度 如果如果希望只显示两个图片, 那就是两个空白档)
4.那么这个问题怎么解决呢?
只需将图片的前三个复制到最后面, 动画位移的长度不变, 将ul的宽度增加三个li的大小就可以解决啦!
原理: 动画位移的长度不变, 在最后面加入开始的三个图片 , 当最后一个图片(不算之后加入的三张最开始的图片) 移出框框时,动画也正好完成了, 后加入的三个图片正好填补了框框的空白处, 此时动画设置的是无限循环效果, 当新一轮动画开始时, 正好又是最开始的三张图片在朝右位移, 因此才达到了无限循环的效果
<style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}ul {/*因为是10张照片,所以ul的宽 ... 动画模块-云层效果 * { margin:0; padding:0; } ul { height: 400px; background-color: skyblue; margin-top: 100p ... 与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: 本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ... 前台代码: <div class="sub_box"><div id="p-select" class="sub_nav" ... 纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ... 目录 一.简介 二.实现 三.代码 四.实现效果 一.简介 通过安卓自定义View实现根据手指点击或移动轨迹绘制出折(曲)线图并循环滚动. 二.实现 获取手指点击和移动的y坐标存入数组,设定好x间隔, ... 首先,借助一张草图来简单说明一下往左移动的做法(往右相同). 如上图所示,图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列,当滚动完一次后就把图片扯回到起点,重新滚动.这里的往左运动把图片扯回起 ... Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...CSS3 用动画实现无缝滚动图效果相关推荐
最新文章
热门文章