接下来我们一起来分析一下源码,首先是HTML代码,非常简单:
些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;
- }
复制代码 纯CSS3实现的图片滑块程序,效果非常酷,布布扣,bubuko.com
纯CSS3实现的图片滑块程序,效果非常酷
原文:http://www.cnblogs.com/liweitao/p/3816977.html