"image slide"
Bootstrap 3.3.0 Snippet by evarevirus

<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; } }

Related: See More


Questions / Comments: