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 Columns分列式布局方法简介
May 03 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 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对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Javascript 类型转换方法
2010/10/24 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python实现在线音乐播放器
2017/03/03 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
tensorflow更改变量的值实例
2018/07/30 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
django使用xadmin的全局配置详解
2019/11/15 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
高中自我评价范文
2014/01/27 职场文书
妇产医师自荐信
2014/01/29 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
个人借款担保书
2014/04/02 职场文书
校长创先争优承诺书
2014/08/30 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
详解Node.js如何处理ES6模块
2021/05/15 Javascript
opencv读取视频并保存图像的方法
2021/06/04 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL