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 相关文章推荐
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 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实现带重试功能的curl连接示例
2016/07/28 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
详解js的六大数据类型
2016/12/27 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
pyside写ui界面入门示例
2014/01/22 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
实践Vim配置python开发环境
2018/07/02 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
大学迎新生标语
2014/10/06 职场文书
建议书格式
2015/02/04 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS