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 相关文章推荐
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
学习python (1)
2006/10/31 Python
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
如何理解委托
2012/01/06 面试题
报社实习生自荐信
2014/01/24 职场文书
销售总经理岗位职责
2014/03/15 职场文书
促销活动总结
2014/04/28 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
法律顾问服务方案
2014/05/15 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
索赔员岗位职责
2015/02/15 职场文书