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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
谈谈关于php的优点与缺点
2013/04/11 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
ext实现完整的登录代码
2008/08/08 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
初学Python实用技巧两则
2014/08/29 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python装饰器的特性原理详解
2019/12/25 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
正规的求职信范文分享
2013/12/11 职场文书
六一儿童节主持词
2014/03/21 职场文书
目标管理责任书
2014/04/15 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
python区块链实现简版工作量证明
2022/05/25 Python