css33d图片轮播_通过html+css3实现图片轮播切换
摘要:图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。
图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。
下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。
html代码:html>
css轮播
- 1
- 2
- 3
图片轮播切换前的css样式:
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #82ccdd;
display: flex;
justify-content: center;
align-items: center;
}
div.scroll-photo{
position: absolute;
width: 400px;
height: 300px;
overflow: hidden;
}
div.photos{
position: absolute;
width: 1200px;
height: 300px;
z-index: -1;
}
div.photos img{
position: relative;
width: 400px;
height: 300px;
float: left;
}
div.index ul{
position: absolute;
display: grid;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
width: 150px;
grid-template: 1fr/repeat(3,1fr);
justify-items: center;
}
div.index ul::after{
content: '';
position: absolute;
top: 0;
left: 12.5px;
width: 25px;
height: 25px;
border-radius: 50%;
z-index: -1;
background: #d63031;
}
div.index ul li{
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
color: #FFF;
background: rgba(0,0,0,.5);
display: grid;
justify-content: center;
align-items: center;
}
图片切换效果css:div.photos{
animation:scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
div.index ul::after{
animation:index-scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
@keyframes scroll{
to{
transform: translateX(-1200px);
}
}
@keyframes index-scroll{
to{
transform: translateX(150px);
}
}
只需把图片切换效果的css加到上面切换前的css后面即可。
这里用到的css3属性是animation,animation有个steps属性,它可以指定动画分几步来完成,这里的banner设置了3张图片,所以这里设置动画分3步完成。
transform: translateX(-1200px):3张图片,每张图片的宽度是400,图片轮播是从左到有显示图片,但显示图片的窗口是不动的,所以可以当成把图片往左拉,因此translateX里面的参数是负值。
index-scroll对应的是数字高亮图标的运动。与图片的运动一样,不过方向相反。
最终效果
css33d图片轮播_通过html+css3实现图片轮播切换相关推荐
- 图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
- 图片压缩软件_简单易用的图片压缩软件gt;给图片减肥
正文共816字,预计阅读时间为:3分钟 无论你是设计师 自媒体.办公编辑人员 还是学生 很多时候都会遇到 图片文件体积太大 导致无法上传 或传输太过耗时耗流量的问题 这时我们就需要 一款免费图片压缩工 ...
- 图片背景虚化_如何用PPT制作图片虚化背景?
你是否厌倦了千篇一律的白色PPT背景,想为PPT增加一点背景装饰,但是又愁没有好的素材图做背景? 今天我们要分享的是如上图这样,图片虚化效果的PPT背景.这样的背景图,色彩简洁清新,不显得花哨,同时与 ...
- python批量图片文字识别_利用Python批量进行图片文字识别
实现逻辑 1. 批量获取图片的路径 2. 通过调用百度OCR接口批量识别图片 3. 将返回值写入txt 实现过程 1. 安装百度的Python SDK pip install baidu-aip 2. ...
- python批量读取图片gps位置_某少儿不宜网站图片拍摄位置分析,Python批量读取图片GPS位置!...
原标题:某少儿不宜网站图片拍摄位置分析,Python批量读取图片GPS位置! 1. python读取图片exif属性中的GPS信息 智能手机或平板如果在拍照时开启定位服务,照片中就会记录拍照位置信息和 ...
- python绘制动漫人物图片女生可爱_日本动漫人物图片女生可爱图片大全
日本动漫一直都是动漫行业的领军者,日本是一个全民都喜欢可爱事物的国家,因此日本动漫里的可爱女生自然不在少数,下面是学习啦小编整理的日本动漫人物图片女生可爱图片大全,欢迎欣赏. 日本动漫人物图片女生可爱 ...
- Java怎么让图片在窗体_在窗口添加背景图片-java怎么设置窗体的背景图片 – 手机爱问...
2018-04-07 背景图片怎么设置? 背景图片代码:更换整体页面背景的源代码:body{b (大背景图片地址) repeatscroll!important;}更换页面题图logo图片的源代码:. ...
- layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
- javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图 实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局 简易版轮播图 < > 页面样式 .container{width: 60 ...
最新文章
- ML基石_10_LogisticRegression
- Bitbucket Pipes发布,带来30+自动化CI/CD管道的方法
- WPD:Page Download Time Breakdown选项详解
- visual studio 2017插件安装qt
- Java中JFrame怎样控制闪烁_在JFrame Java中闪烁
- 微软开源Bing搜索背后的关键算法
- mysql 时间 1_(转)mysql日期时间函数1
- LeetCode 第 24 场双周赛(326/1898,前17.2%)
- “70后”清华教授,任大学校长
- oracle 如何迁移到 mysql_怎么将数据库从Oracle迁移到SQL Server,或从Oracle迁移到MySQL...
- pd17虚拟机 mac 无限使用
- 请求时才延迟加载JavaScript文件 - 优化篇
- 如何防止网页被Demo
- 使用C#在应用程序间发送消息
- 201521123045 《Java程序设计》第7周学习总结
- 蓝牙Beacon室内定位全栈
- 优色专显教你led显示屏诺瓦刷屏教程
- 考研杂谈一:计算机专业有必要考研吗?
- 基于李雅普诺夫函数的跟踪控制(一)
- 论文阅读报告:Taxonomy-aware feature engineering for microbiome classification,Mai Oudah and Andreas Hen