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中31种选择器使用方法教程
Dec 05 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
自我评价范文
2013/12/22 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
毕业设计说明书
2014/05/07 职场文书
一体化教学实施方案
2014/05/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年医院工作总结
2014/11/20 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
环卫处个人工作总结
2015/03/04 职场文书
医院合作意向书范本
2015/05/08 职场文书
运动会100米加油稿
2015/07/21 职场文书
转变工作作风心得体会
2016/01/23 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
导游词之吉林吉塔
2019/11/11 职场文书