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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
table不让td文字溢出操作方法
Dec 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
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
新浪的图片新闻效果
2007/01/13 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
python如何查看系统网络流量的信息
2016/09/12 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Django models filter筛选条件详解
2020/03/16 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
校运动会广播稿(100篇)
2014/09/12 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
出国导师推荐信
2015/03/25 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
民事辩护词范文
2015/05/21 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
学习十八大的感悟
2015/08/11 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书