CSS 实现滚动的图片栏 实例代码
发布时间:2018-09-25 11:06:19 作者:佚名 我要评论
这篇文章主要介绍了CSS 实现滚动的图片栏 实例代码,需要的朋友可以参考下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
在一些网站上可以经常看到有一些图片进行持续不断的滚动,这个效果可以通过css的动画效果来实现。具体效果如下
主要原理是通过动画向左移动。
首先给出两组一样的图片(同一行上),让整体图片向左移动一组图片的长度,
这样在动画结束时会迅速还原到原来位置,而此时正好与第二组图片交替,看起来就像是一组图片在不断循环向左滚动。
具体步骤如下:
1、设置主体代码各处两组一样的图片
1 2 3 4 5 6 7 8 9 10 | <nav> <ul> <li><img src= "Images/1 (2).jpg" alt= "" ></li> <li><img src= "Images/2 (2).jpg" alt= "" ></li> <li><img src= "Images/3 (2).jpg" alt= "" ></li> <li><img src= "Images/1 (2).jpg" alt= "" ></li> <li><img src= "Images/2 (2).jpg" alt= "" ></li> <li><img src= "Images/3 (2).jpg" alt= "" ></li> </ul> </nav> |
2、设置nav的大小,宽度为一组图片相加的宽度,高度为图片的高度。
3、设置ul大小,宽度为nav的两倍,高度与nav相同,并指定动画相关属性
4、定义动画,主要是向左移动一组图片的长度
1 2 3 4 5 6 7 8 | @keyframes picmove { from { transform: translate( 0 ); } to { transform: translate( -750px ); } } |
5、增加鼠标悬停,动画暂停的效果
6、最后给nav 增加 overflow:hidden 使得超出的部分隐藏,这样整体一组滚动的图片栏就做好了
整体代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>Document</title> <style> * { margin : 0 ; padding : 0 ; } ul { list-style : none ; } nav { width : 750px ; height : 170px ; border : 1px solid red ; margin : 100px auto ; overflow : hidden ; } ul { width : 200% ; height : 100% ; animation: picmove 5 s linear infinite forwards; } @keyframes picmove { from { transform: translate( 0 ); } to { transform: translate( -750px ); } } img { width : 250px ; height : 170px ; float : left ; } ul:hover { animation-play-state: paused; } </style> </head> <body> <nav> <ul> <li><img src= "Images/1 (2).jpg" alt= "" ></li> <li><img src= "Images/2 (2).jpg" alt= "" ></li> <li><img src= "Images/3 (2).jpg" alt= "" ></li> <li><img src= "Images/1 (2).jpg" alt= "" ></li> <li><img src= "Images/2 (2).jpg" alt= "" ></li> <li><img src= "Images/3 (2).jpg" alt= "" ></li> </ul> </nav> </body> </html> |
总结
以上所述是小编给大家介绍的CSS 实现滚动的图片栏 实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- DIV+CSS仿百度图片栏目搜索页面模板特效源码是一款仿新版百度图片栏目搜索页面模板素材下载。本段特效源码可以在各大网站使用,有需要的朋友直接下载使用2017-07-21
基于jquery+css3实现的通栏响应式图片轮播动画特效源码
基于jquery+css3实现的通栏响应式图片轮播动画特效源码是一段实用的产品展示代码,运行流畅,反应速度灵敏,是一段非常优秀的特效源码,需要的朋友们可以前来下载使用2014-10-23- 网页制作Webjx文章简介:到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角 从web2.0开始,开2009-04-02
最新评论