纯CSS3实现轮播切换效果
2016-08-29 17:36
357 查看
使用纯css3实现与轮播器一样的功能。
HTML代码:
CSS代码:
点击查看效果
HTML代码:
<div class="slide-container"> <input type="radio" name="slider2" id="slider1" checked="checked" > <input type="radio" name="slider2" id="slider2" > <input type="radio" name="slider2" id="slider3" > <input type="radio" name="slider2" id="slider4" > <div class="slide_bd"> <ul class="list"> <li> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg"/> </li> <li> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg"/> </li> <li> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg"/> </li> <li> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg"/> </li> </ul> </div> <div class="num"> <label for="slider1"></label> <label for="slider2"></label> <label for="slider3"></label> <label for="slider4"></label> </div> </div>
CSS代码:
ul,li{list-style:none;} .slide-container {position:relative;width:384px;height:512px;margin:0 auto;text-align:center;overflow:hidden;} .slide-container input{display:none;} .slide_bd {position:absolute;width:100%;height:100%;overflow:hidden;} .slide_bd .list {position:absolute;left:0;top:0;width:400%;height:100%;-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 .list li {float:left;} /* #slider1:checked~.slide_bd .list含义是:匹配#slider1选中的 后面的.slide_bd .list的元素 */ /* ~ 是兄弟元素选择器 E~F:匹配位于E元素后面的F元素*/ #slider1:checked~.slide_bd .list{left:0;} #slider2:checked~.slide_bd .list{left:-100%;} #slider3:checked~.slide_bd .list{left:-200%;} #slider4:checked~.slide_bd .list{left:-300%;} .slide_bd .list img{display:block;width:384px;height:512px;overflow:hidden;} .num {position:absolute;bottom:10px;width:100%;} .num label {display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 5px;background:#999;} /* 鼠标移动上去的时候 */ .num label:hover, #slider1:checked~.num label:nth-child(1), #slider2:checked~.num label:nth-child(2), #slider3:checked~.num label:nth-child(3), #slider4:checked~.num 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) }
点击查看效果
相关文章推荐
- CSS3实现轮播切换效果
- JQuery实现图片轮播切换效果--水平切换/垂直切换
- 淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现
- CSS3 :target伪类实现Tab切换效果 BY commy
- CSS3实现手机网页3D切换效果
- CSS3实现多页签图片缩放切换效果
- JS图片轮播切换效果实现
- Github学习之MagicViewPager实现特色轮播切换效果
- 原生js实现图片层叠轮播切换效果
- CSS3 :target伪类实现Tab切换效果
- jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果
- CSS3实现整屏切换效果
- js实现支持手机滑动切换的轮播图片效果实例
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
- 分享一个CSS3实现的动态内容标签页切换效果教程
- 实用CSS3属性之 :target伪类实现Tab切换效果
- 用css3或者jquery实现切换按钮效果
- css3实现手机效果的“切换标签”
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果