CSS3 制作的图片滚动效果


Posted in HTML / CSS onApril 14, 2021

实现效果

CSS3 制作的图片滚动效果

实现代码

html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

CSS3

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}

其他

对切换速度有要求的修改CSS3最后的时间即可

以上就是CSS3 制作的图片滚动效果的详细内容,更多关于CSS3 图片滚动的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
举例详解CSS3中的Transition
Jul 15 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
CSS3常见动画的实现方式
Apr 14 #HTML / CSS
CSS3实现的水平标题菜单
Apr 14 #HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
详解Html5项目适配系统深色模式方案总结
Apr 14 #HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Django如何实现上传图片功能
2019/08/16 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
渡河少年教学反思
2014/02/12 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
档案工作汇报材料
2014/08/21 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
个人先进材料范文
2014/12/30 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers