纯CSS3实现的图片滑块程序 效果非常酷 - html/css语
之前我们经常会看到很多利用jQuery实现的焦点图插件，种类太多了，今天我想给大家分享一款利用纯CSS3实现的图片滑块应用，完全是利用CSS3的相关特性，没有使用JS，个人觉得还是挺不错的，先来看看效果图： 看上去挺不错的吧，简洁、清新、大气。 当然我们也可以在这里查看DEMO演示。 接下来我们一起来分析一下 源码，首先是HTML代码，非常简单： 复制代码 <div id="gal"> <nav class="galnav"> <ul> <li><input type="radio" name="btn" value="one" checked="checked" /> <label for="btn"></label> <figure> <img src="images/01_Fabio_Basile.jpg" /> <figcaption> <h4>Fabio Basile</h4> <nav role='navigation'> <p>iPhone 6 Infinity</p> <ul> <li><a href="#" class="entypo-dribbble"> </a></li> <li><a href="#" class="entypo-twitter"></a> </li> </ul> </nav> </figcaption> </figure> </li> <li><input type="radio" name="btn" value="two" /> <label for="btn"> </label> <figure class="entypo-forward"> <img src="images/08_Brian_Miller.jpg" /> <figcaption> <h4>Brian Miller</h4> <nav role='navigation'> <p>TypeTi.me</p> <ul> <li><a href="#" class="entypo-dribbble"></a> </li> <li><a href="#" class="entypo-twitter"></a> </li> </ul> </nav> </figcaption> </figure> </li> <li><input type="radio" name="btn" value="three" /> <label for="btn"> </label> <figure class="entypo-forward"> <img src="images/05_Nicolas_Quod.jpg" /> <figcaption> <h4>Nicolas Quod</h4> <nav role='navigation'> <p>Iphone 6 - Notification - iOS 7</p> <ul> <li> <a href="#" class="entypo-dribbble"> </a></li> <li> <a href="#" class="entypo-twitter"> </a></li> </ul> </nav> </figcaption> </figure> </li> <li><input type="radio" name="btn" value="four" /> <label for="btn"> </label> <figure class="entypo-forward"> <img src="images/04_Joffrey.jpg" /> <figcaption> <h4>Joffrey</h4> <nav role='navigation'> <p>鈻?/p> </p> <ul> <li><a href="#" class="entypo-dribbble"> </a></li> <li><a href="#" class="entypo-twitter"> </a></li> </ul> </nav> </figcaption> </figure> </li> <li><input type="radio" name="btn" value="five" /> <label for="btn"> </label> <figure class="entypo-forward"> <img src="images/09_Jared_Long.jpg" /> <figcaption> <h4>Jared Long</h4> <nav role='navigation'> <p>Don't drop your iPhone Infinity</p> <ul> <li> <a href="#" class="entypo-dribbble"> </a></li> <li> <a href="#" class="entypo-behance"> </a></li> </ul> </nav> </figcaption> </figure> </li> <li><input type="radio" name="btn" value="six" /> <label for="btn"> </label> <figure class="entypo-forward"> <img src="images/02_Charles_Treece.jpg" /> <figcaption> <h4>Charles Treece</h4> <nav role='navigation'> <p>iPhone 6 Infinity Side Status Bar</p> <ul> <li> <a href="#" class="entypo-dribbble"> </a></li> <li> <a href="#" class="entypo-twitter"> </a></li> </ul> </nav> </figcaption> </figure> </li> </ul> </nav> </div> 复制代码 这些HTML代码只是构造了几张图片，等一下可以切换。另外，每张图片都放置一个radio，这个radio来充当切换按钮。 接下来就是CSS代码了: 复制代码 *, *:before, *:after { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #gal { position:relative; width:600px; height:300px; margin:0 auto; top:100px; background:white; -webkit-box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); -moz-box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); -webkit-transform:translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #gal:after { content:''; position:absolute; bottom:24px; right:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.35); z-index:3; } #gal ul {list-style-type:none;} input[type="radio"], input[type="radio"] + label { position:absolute; bottom:15px; display:block; width:20px; height:20px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer; } input[type="radio"] { opacity:0; z-index:9; } input[value="one"], input[value="one"] + label {left:20px;} input[value="two"], input[value="two"] + label {left:128px;} input[value="three"], input[value="three"] + label {left:236px;} input[value="four"], input[value="four"] + label {left:344px;} input[value="five"], input[value="five"] + label {left:452px;} input[value="six"], input[value="six"] + label {right:20px;} input[type="radio"] + label { background:rgba(255,255,255,0.35); z-index:7; -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } [class*="entypo-"]:before { position:absolute; font-family: 'entypo', sans-serif; } figure[class*="entypo-"]:before { left:10px; top:5px; font-size:2rem; color:rgba(255,255,255,0); z-index:1; -webkit-transition:color .1s; -moz-transition:color .1s; -o-transition:color .1s; transition:color .1s; } a[class*="entypo-"]:before { top:8px; left:9px; font-size:1.5rem; color:white; } a:hover[class*="entypo-"]:before { color:white; } figure, figure img, figcaption { position:absolute; top:0; right:0; } figure { bottom:0; left:0; width:600px; height:300px; display:block; overflow:hidden; } figure img { bottom:0; left:0; display:block; width:600px; height:300px; z-index:1; -webkit-transform:translateX(600px); -moz-transform:translateX(600px); -ms-transform:translateX(600px); -o-transform:translateX(600px); transform:translateX(600px); -webkit-transition:all .15s .15s, z-index 0s; -moz-transition:all .15s .15s, z-index 0s; -o-transition:all .15s .15s, z-index 0s; transition:all .15s .15s, z-index 0s; } figcaption { display:block; width:270px; height:300px; padding-top:20px; background-image:radial-gradient(rgba( 255,255,255,0.3), transparent); background-size:600px 600px; background-repeat:no-repeat; background-position:-300px -150px; text-align:center; z-index:3; -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -webkit-transform:translateX(300px); -moz-transform:translateX(300px); -ms-transform:translateX(300px); -o-transform:translateX(300px); transform:translateX(300px); -webkit-transition:all .35s; -moz-transition:all .35s; -o-transition:all .35s; transition:all .35s; } h4 { display:inline-block; padding:0 15px; color:white; font-family: 'Titillium Web', sans-serif; font-weight:300; font-size:2rem; } figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a { position:relative; display:block; width:40px; height:40px; background:rgba(255,255,255,0.2); text-decoration:none; color:white; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -webkit-transition:all .15s; -moz-transition:all .15s; -o-transition:all .15s; transition:all .15s; } figcaption nav ul li a:hover { background:rgba(255,255,255,0); -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); } figcaption p { padding:50px 15px; font-family:'Titillium Web', sans-serif; font-weight:300; color:#333; background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35))); background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-size:1px 100%; background-repeat:no-repeat; background-position:50% 0%; } input[type="radio"]:hover + label { background:rgba(255,255,255,0.6); } input[type="radio"]:checked + label { background:rgba(255,255,255,1); -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); } input[type="radio"]:checked + label:before {} input[type="radio"]:checked ~ figure img { z-index:2; -webkit-transform:translatex(0px); -moz-transform:translatex(0px); -ms-transform:translatex(0px); -o-transform:translatex(0px); transform:translatex(0px); -webkit-transition:all .15s, z-index 0s; -moz-transition:all .15s, z-index 0s; -o-transition:all .15s, z-index 0s; transition:all .15s, z-index 0s; } input[type="radio"]:checked ~ figure[class*="entypo-"]:before { z-index:3; color:rgba(255,255,255,0.5); -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s; } input[type="radio"]:checked ~ figure figcaption { z-index:8; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:all .35s, .7s; -moz-transition:all .35s, .7s; -o-transition:all .35s, .7s; transition:all .35s, .7s; } h2 { margin-top:150px; text-align:center; font-family: 'Titillium Web', sans-serif; font-weight:300; font-size:1.2rem; } h2 a { position:relative; color:tomato; text-decoration:none; } h2 a:after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:tomato; -webkit-transition:width .1s; -moz-transition:width .1s; -o-transition:width .1s; transition:width .1s; } h2 a:hover:after { width:100%; } body {background:#f0f0f0;} html, body { width:100%; height:100%; } 复制代码 这个 CSS代码相对比较复杂，重点在这个地方： 利用label重写radio的样式，但是又能完成点击label就像点击radio一样的效果，核心代码如下： 复制代码 input[type="radio"], input[type="radio"] + label { position:absolute; bottom:15px; display:block; width:20px; height:20px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer; } input[type="radio"] { opacity:0; z-index:9; } input[value="one"], input[value="one"] + label {left:20px;} input[value="two"], input[value="two"] + label {left:128px;} input[value="three"], input[value="three"] + label {left:236px;} input[value="four"], input[value="four"] + label {left:344px;} input[value="five"], input[value="five"] + label {left:452px;} input[value="six"], input[value="six"] + label {right:20px;} input[type="radio"] + label { background:rgba(255,255,255,0.35); z-index:7; -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; }
相关文章
最新评论
最近发表
今天是世界地球日 关于这颗星球的“现状”我们了解多少？
2024/12/16 · WEB前端
vivo NEX 3S到底有多强？一篇文章就让你喜欢上它
2024/12/16 · WEB前端
韩媒:中国横扫全球一半量子技术专利 投资规模世界第一
2024/12/16 · WEB前端
传三星正秘密研发两款高端芯片组 用上了AMD黑科技
2024/12/15 · WEB前端
三星髋关节助行器机器人通过ISO认证 可加速且省力
2024/12/15 · WEB前端
小米手表Color价格参数全曝光 能刷公交控制家电799元
2024/12/14 · WEB前端
逆风成长 杨元庆携联想集团19/20 Q3财报空降微博
2024/12/12 · WEB前端
专访YaoYao跳绳App开发者汪家浩：兴趣是最好的老师
2024/12/11 · WEB前端
2021年度十大科学突破：人工智能可预测蛋白质结构
2024/12/11 · WEB前端
NASA正在征集月球厕所设计 最高可获得约25万元奖金
2024/12/10 · WEB前端
网站分类
文章归档
- 2024年11月 (391)
- 2024年10月 (1138)
- 2024年9月 (1197)
- 2024年8月 (1264)
- 2024年7月 (1211)
- 2024年6月 (1162)
- 2024年5月 (1700)
- 2024年4月 (2773)
- 2024年3月 (2791)
- 2024年2月 (2596)
- 2024年1月 (2871)
- 2023年12月 (2763)
- 2023年11月 (2663)
- 2023年10月 (2692)
- 2023年9月 (2612)
- 2023年8月 (2724)
- 2023年7月 (2727)
- 2023年6月 (2600)
- 2023年5月 (2739)
- 2023年4月 (2631)
- 2023年3月 (2748)
- 2023年2月 (2439)
- 2023年1月 (2736)
- 2022年12月 (2780)
- 2022年11月 (1853)
- 2022年10月 (1520)
- 2022年9月 (1515)
- 2022年8月 (1533)
- 2022年7月 (1516)
- 2022年6月 (1504)
- 2022年5月 (613)
