<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<input checked="checked" id="control-1" name="select-img" type="radio" /><label class="control-label" for="control-1">1</label><input id="control-2" name="select-img" type="radio" /><label class="control-label" for="control-2">2</label><input id="control-3" name="select-img" type="radio" /><label class="control-label" for="control-3">3</label><input id="control-4" name="select-img" type="radio" /><label class="control-label" for="control-4">4</label>
<div class="slide-container">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="title">
<h1>
<span>情缘</span><span>你一直梦想</span>
</h1>
<h1>
<span>冒险</span><span>凡有趣的开始</span>
</h1>
<h1>
<span>性质</span><span>难忘的经历</span>
</h1>
<h1>
<span>宁静</span><span>当沉默接触大自然</span>
</h1>
</div>
</div>
body {
font-family: Cambria;
background: repeating-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 92%, rgba(255, 255, 255, 0.5)), repeating-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 92%, rgba(0, 0, 0, 0.2)), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 92%, rgba(0, 0, 0, 0.2));
background-size: 18px 18px,12px 12px,12px 12px;
}
.container {
margin: 5em auto;
width: 600px;
height: 400px;
position: relative;
border: 20px solid white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
/* input */
/* slide-container */
/* background */
/* background position */
/* 1 */
/* 2 */
/* 3 */
/* 4 */
/* title */
/* active */
/* even */
/* label */
/* title show */
/* title h1 show */
}
.container input {
display: none;
}
.container .control-label {
margin-top: 350px;
float: left;
width: 150px;
height: 30px;
position: relative;
z-index: 1;
line-height: 32px;
font-size: 24px;
font-style: italic;
color: white;
text-align: center;
cursor: pointer;
}
.container .control-label:before {
position: absolute;
z-index: -1;
left: 50%;
margin-left: -17px;
content: "";
width: 34px;
height: 34px;
background-color: rgba(130, 195, 217, 0.9);
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
}
.container .control-label:after {
position: absolute;
right: 0;
bottom: -20px;
content: "";
width: 1px;
height: 400px;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
.container .control-label, .container .control-label:before {
transition: all .5s ease-in-out;
}
.container .slide-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* div */
}
.container .slide-container div {
float: left;
position: relative;
width: 150px;
height: 100%;
overflow: hidden;
/* span */
}
.container .slide-container div span {
position: absolute;
left: 0;
top: 400px;
width: 100%;
height: 100%;
}
.container .slide-container div:nth-child(2n+2) span {
top: -400px;
}
.container #control-1:checked ~ .slide-container, .container .slide-container div span:nth-child(1) {
background: url(http://www.17sucai.com/preview/11/2013-04-30/CSS3SlidingImagePanels/images/1.jpg) no-repeat;
}
.container #control-2:checked ~ .slide-container, .container .slide-container div span:nth-child(2) {
background: url(http://www.17sucai.com/preview/11/2013-04-30/CSS3SlidingImagePanels/images/2.jpg) no-repeat;
}
.container #control-3:checked ~ .slide-container, .container .slide-container div span:nth-child(3) {
background: url(http://www.17sucai.com/preview/11/2013-04-30/CSS3SlidingImagePanels/images/3.jpg) no-repeat;
}
.container #control-4:checked ~ .slide-container, .container .slide-container div span:nth-child(4) {
background: url(http://www.17sucai.com/preview/11/2013-04-30/CSS3SlidingImagePanels/images/4.jpg) no-repeat;
}
.container .slide-container div:nth-child(1) span {
background-position: 0 0;
}
.container .slide-container div:nth-child(2) span {
background-position: -150px 0;
}
.container .slide-container div:nth-child(3) span {
background-position: -300px 0;
}
.container .slide-container div:nth-child(4) span {
background-position: -450px 0;
}
.container .title h1 {
position: absolute;
left: 0;
top: 50%;
width: 100%;
color: white;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: all .8s ease-in-out;
}
.container .title h1 span:nth-child(1) {
margin-bottom: 10px;
display: block;
font-family: BebasNeueRegular;
font-size: 70px;
letter-spacing: 7px;
transform: translate3d(0, -100px, 0);
opacity: 0;
transition: all .5s ease-in-out;
}
.container .title h1 span:nth-child(2) {
display: block;
padding: 10px;
font-family: Cambria;
font-style: italic;
font-size: 14px;
background-color: rgba(104, 171, 194, 0.9);
}
.container input:checked ~ .slide-container div span {
animation: slideOut .5s ease-in-out;
}
.container input:checked ~ .slide-container div:nth-child(2n+2) span {
animation: slideOutEven .5s ease-in-out;
}
.container #control-1:checked ~ .slide-container div span:nth-child(1), .container #control-2:checked ~ .slide-container div span:nth-child(2), .container #control-3:checked ~ .slide-container div span:nth-child(3), .container #control-4:checked ~ .slide-container div span:nth-child(4) {
top: 0;
transition: top .5s ease-in-out;
animation: none;
}
.container #control-1:checked + .control-label, .container #control-2:checked + .control-label, .container #control-3:checked + .control-label, .container #control-4:checked + .control-label {
color: #68abc2;
}
.container #control-1:checked + .control-label:before, .container #control-2:checked + .control-label:before, .container #control-3:checked + .control-label:before, .container #control-4:checked + .control-label:before {
background-color: white;
box-shadow: 0px 0px 0px 4px rgba(104, 171, 194, 0.6);
}
.container #control-1:checked ~ .title h1:nth-child(1), .container #control-2:checked ~ .title h1:nth-child(2), .container #control-3:checked ~ .title h1:nth-child(3), .container #control-4:checked ~ .title h1:nth-child(4) {
opacity: 1;
}
.container #control-1:checked ~ .title h1:nth-child(1) span:nth-child(1), .container #control-2:checked ~ .title h1:nth-child(2) span:nth-child(1), .container #control-3:checked ~ .title h1:nth-child(3) span:nth-child(1), .container #control-4:checked ~ .title h1:nth-child(4) span:nth-child(1) {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* animation */
@keyframes slideOut {
from {
top: 0;
}
to {
top: -400px;
}
}
/* animation even */
@keyframes slideOutEven {
from {
top: 0;
}
to {
top: 400px;
}
}
