手把手教你用纯css3实现轮播图效果实例


Posted in HTML / CSS onMay 04, 2017

首先先看demo吧,点击查看demo

一、随便说几句

css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度,利于前端的学习,其精简的代码量把我们从烦人的js调试中解放出来,当然css的动画效果有其局限性,我们不能只用css3模拟出全部的就是动画,另外就是浏览器的兼容性问题。我们这次用css3实现一个轮播图效果,体验一下css3的强大。首先说明我们可次只实现了自动轮播,效果也是最常见的淡入淡出,并未实现点击轮换效果,至少在我目前水平来看,自动轮播与点击轮换两者纯css3只能选其一,如果可以同时实现两种效果的方法,请告诉我。

二、布局

<section class="slider-contaner">
    <ul class="slider">
        <li class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
</section>

html代码没有什么可说的,样式的话首先必定slider的大盒子必定是相对定位,另外我们采用在li标签中添加background-image,因为这样才有可能用纯的css实现响应式,另外背景图为了在响应式中看清全貌,必然使用background-size:100%,另外就是高度问题了,显然slider-container必需是和li的高度一致,因为响应式中必然这个高度不能固定死,所以使用height属性显然不行,padding属性可以解决这个问题,一是background-image可以显示在padding中,二是padding中以%为单位是以父元素宽度为基准的。

*{
      margin:0;
      padding:0;
}
ul,li{
      list-style: none;
}
.floatfix {
      *zoom: 1;
}
.floatfix:after {
      content: "";
      display: table;
      clear: both;
}
.slider-contaner{
      width:100%;
      position:relative;
}
.slider,.slider-item{
      padding-bottom:40%;
}
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
.slider-item1{
      background-image:url(imgs/1.jpg);
}
.slider-item2{
      background-image:url(imgs/2.jpg);
}
.slider-item3{
      background-image:url(imgs/3.jpg);
}
.slider-item4{
      background-image:url(imgs/4.jpg);
}
.slider-item5{
      background-image:url(imgs/5.jpg);
}

三、设计动画

淡入淡出效果肯定是使用opacity,首先整体来看所有图片的淡入淡出都是同一个动画,只是时间不一样而已,这肯定是利用animation-delay来控制,动画无限轮换肯定使用animation-iteration-count: infinite,我们这次5张图片,整个动画分为图片停留和淡入淡出两个效果,用下图表示,箭头表示淡入淡出过程。

手把手教你用纯css3实现轮播图效果实例

因为css3中没有一个属性是规定两次动画播放的时间间隔,所以我们必须把其他图片淡入淡出时该图片的效果写进动画里,显然这时候是opacity:0;我们为了写动画的方便,动画使用线性函数,也就是animation-timing-function:linear;整个过程使用20s,一次停留使用3秒,一次淡入淡出使用1s,折合成百分比也就是15%和5%;

@keyframes fade{
0%{
      opacity:0;
      z-index:2;
}
5%{
      opacity:1;
      z-index: 1;
}
20%{
      opacity:1;
      z-index:1;
}
25%{
      opacity:0;
      z-index:0;
}
100%{
      opacity:0;
      z-index:0;
}
}

接下来就是为每张图片添加animation-delay了,因为第一张图片必须显示在最前,所以其他通过相邻兄弟选择器使用opacity:0,第一张图片开始不需要淡入淡出,直接跳至停留也就是5%,所以animation-delay为-1s,第二章图片和第一张相隔20%,也就是4s,animation-delay为3s,以此类推

.slider-item + .slider-item{
      opacity:0;
}
.slider-item1{
      animation-delay: -1s;
}
.slider-item2{
      animation-delay: 3s;
}
.slider-item3{
      animation-delay: 7s;
}
.slider-item4{
      animation-delay: 11s;
}
.slider-item5{
      animation-delay: 15s;
}

这个时候我们的轮播图可以动了

四、添加轮播焦点

添加轮播焦点当然不是为了点击,而是告诉访问者这里有几张图片和目前图片的位置,至少以我个人而言,轮播焦点很重要,因为如果我不知道轮播的图片有几张,我又没有办法点击,我就会非常不安,感觉自己没有看到整个网页的全貌。所以我们还是添加一下轮播焦点。首先非常明确的这个仍然可以使用上面的动画,另外布局肯定使用position:absolute,另外很明显焦点我们必须写两次,一次是当前图片的样式,一次是非当前图片的样式

<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>
.focus-container{
      position:absolute;
      bottom:2%;
      z-index:7;
      margin:0 auto;
      left:0;
      right:0;
}
.focus-container ul{
      margin-left:46%;
}
.focus-container li{
      width:10px;
      height:10px;
      border-radius:50%;
      float:left;
      margin-right:10px;
      background:#fff;
}
.focus-item{
      width:100%;
      height:100%;
      background:#51B1D9;
      border-radius:inherit;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-name:fade;
      animation-iteration-count: infinite;
}
.focus-item1{
      animation-delay: -1s;
}
.focus-item2{
      animation-delay: 3s;
}
.focus-item3{
      animation-delay: 7s;
}
.focus-item4{
      animation-delay: 11s;
}
.focus-item5{
      animation-delay: 15s;
}

五、梳理代码

如果你维护过别人的代码你就会知道,代码梳理对于后期维护的重要性了,没有经过梳理的css代码,随心所欲写到哪里就是哪里,对于后期维护来说简直就是一场灾难,css代码梳理个人认为首先必须添加必要的注释,将css代码分区,另外就是尽量减少后期修改需要修改的地方,这个主要是代码重构的问题,这个问题我已经在编写代码的时候考虑到了,所以主要任务就是添加注释和告诉维护者代码最常修改的地方,我们遵循最常修改的代码放到最后的原则。  

我们来分析一下我们的代码如果给别人用可能需要修改的地方,首先肯定是图片路径,所以我们把这个样式放在最后,然后是图片高度,轮播焦点的颜色,动画时间的设置(这里还涉及图片个数),轮播焦点的位置,当然轮播焦点大小也可能修改。重构后代码如下:

<section class="slider-contaner">
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
<li class="slider-item slider-item4"></li>
<li class="slider-item slider-item5"></li>
</ul>
<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>
</section>
/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*设置轮播焦点的位置*/
.focus-container{
bottom:2%;
}
/*设置当前图片焦点的颜色*/
.focus-item{
background:#51B1D9;
}
/*设置动画,请根据实际需要修改秒数*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*设置背景,响应式请利用媒体查询根据断点修改路径*/
.slider-item1{
background-image:url(imgs/1.jpg);
}
.slider-item2{
background-image:url(imgs/2.jpg);
}
.slider-item3{
background-image:url(imgs/3.jpg);
}
.slider-item4{
background-image:url(imgs/4.jpg);
}
.slider-item5{
background-image:url(imgs/5.jpg);
}
/*设置图片的高度,请根据具体需要修改百分比,响应式及时修改此值*/
.slider,.slider-item{
padding-bottom:40%;
}

六、最后扯两句

这种css3实现的轮播图,缺点也是不言而喻,点击轮换和自动轮换两者只能选其一,不过自动轮换可以用在手机端,这是一个不错的选择,另外,现在的网站大都是通栏设计,网页文字很少,尤其是网站首页更是如此,有时候比的不是网站设计的优劣,反而是谁选的图片好看,谁就有可能受到青睐,这种情况我们其实可以考虑将轮播图变为背景的轮换,这时候轮播焦点也就可以不使用了,相信你的博客首页或者产品首页使用背景轮换,效果会非常不错的。  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
You might like
PHP 命令行参数详解及应用
2011/05/18 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python多线程下信号处理程序示例
2019/05/31 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python SocketServer源码深入解读
2019/09/17 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
致跳远运动员广播稿
2014/02/11 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
幼儿园招生广告
2014/03/19 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
道德与公民自我评价
2015/03/09 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers