纯css3做的单重轮播

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-14 15:36:48　-　阅:　-　评:1　-　积分:0

今天就来介绍一款由纯css3实现的高端洋气上档次的单重轮播特效。你不要怀疑自己的听力有问题，就是纯css3实现的单重轮播效果，可以以假乱真到与js/jq相媲美的地步。相信你已经迫不及待的想一睹笔者说的纯css3实现的轮播特效风采了，接下来笔者就献上源码供读者浏览。放张效果图：

源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3做的单重轮播--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3轮播特效,css3动画,css3特效,单重轮播,transition,伪类">
<meta name="description" content="css3轮播特效,css3动画,css3特效,单重轮播,transition,伪类">
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
img{border:0}
.clear{clear:both; font-size:0;height:0;line-height:0; overflow:hidden;}
.slide{width:384px;height:512px;margin:0 auto;text-align:center;position:relative;overflow:hidden;}
.slide_bd{width:100%;height:100%;overflow:hidden;position:absolute;}
.slide_bd .ce{width:400%;height:100%;position:absolute;left:0;top:0;-webkit-transition:left .5s ease-out;-moz-transition:left .5s ease-out;-o-transition:left .5s ease-out;-ms-transition:left .5s ease-out;transition:left .5s ease-out;}
.slide_bd .ce li{float:left;}
.slide_bd .ce li img{width:384px;height:512px;cursor:pointer;}
.slide_hd{position:absolute;width:100%;bottom:10px;}
.slide_hd label{width:10px; height:10px; line-height:10px; border-radius:10px;background:#999;display:inline-block; text-indent:-9999px;-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-moz-transform .1s ease-in;-o-transition:-o-transform .1s ease-in;-ms-transition:-ms-transform .1s ease-in;transition:transform .1s ease-in;}
.slide_hd label:hover,#slider1:checked~.slide_hd label:nth-child(1),#slider2:checked~.slide_hd label:nth-child(2),#slider3:checked~.slide_hd label:nth-child(3),#slider4:checked~.slide_hd label:nth-child(4){background:#f00;cursor:pointer;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}
.slide input{display:none;}
#slider1:checked~.slide_bd .ce{left:0;}
#slider2:checked~.slide_bd .ce{left:-100%;}
#slider3:checked~.slide_bd .ce{left:-200%;}
#slider4:checked~.slide_bd .ce{left:-300%;}
</style>
</head>
<body>
<div class="slide">
　<input type="radio" name="slider" id="slider1" checked="checked" >
　<input type="radio" name="slider" id="slider2" >
　<input type="radio" name="slider" id="slider3" >
　<input type="radio" name="slider" id="slider4" >
<div class="slide_bd">
<ul class="ce">
<li><img src="/d/file/css3/2013-10-10/第一天.jpg" /></li>
<li><img src="/d/file/css3/2013-10-10/老大喝水中.jpg" /></li>
<li><img src="/d/file/css3/2013-10-10/初次挑逗中.jpg" /></li>
<li><img src="/d/file/css3/2013-10-10/老二进食特写.jpg" /></li>
</ul>
</div>
　<div class="slide_hd">
　<label for="slider1"></label>
　<label for="slider2"></label>
　<label for="slider3"></label>
　<label for="slider4"></label>
　</div>
</div>
</body>
</html>

点此下载→→【代码】纯css3做的单重轮播.zip　

从源码中可以看出没有使用任何的js/jq，但是当鼠标点击圆点时奇迹出现了，轮播竟然可以播放了。这是怎么回事呢？你是不是会说这不科学？答案就在源码中，读者细细揣摩吧。

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。请在非ie内核浏览器下进行浏览，推荐chrome浏览器

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-10-14/89.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！