css3實現幻燈片效果
阿新 • • 發佈:2018-12-07
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { width: 960px; margin: 50px auto 0; font: 13px/1.5 "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } #nav { margin: 30px 0 15px; padding: 5px 10px; color: #555555; font-size: 15px; border: 1px solid #6cbdc4; float: right; } #nav label { margin-left: 20px; cursor: pointer; } #nav label:hover { color: #6cbdc4; } #container { width: 960px; float: left; } #wrapper { width: 958px; /*margin-top: -2px;*/ border: 1px solid #dddddd; border-top: none; position: relative; overflow: hidden; } input { display: none; } #slider { width: 3832px; transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1); } #slide1,#slide2, #slide3, #slide4 { color: #777777; font-size: 160px; text-align: center; line-height: 470px; } .slide { width: 958px; height: 470px; float: left; } #trigger1:checked ~ #wrapper #slider { transform: translateX(0px); } #trigger2:checked ~ #wrapper #slider { transform: translateX(-958px); } #trigger3:checked ~ #wrapper #slider { transform: translateX(-1916px); } #trigger4:checked ~ #wrapper #slider { transform: translateX(-2874px); } </style> </head> <body> <nav id="nav"> <label for="trigger1">Slide1</label> <label for="trigger2">Slide2</label> <label for="trigger3">Slide3</label> <label for="trigger4">Slide4</label> </nav> <div id="container"> <input type="radio" name="trigger" id="trigger1" checked> <input type="radio" name="trigger" id="trigger2"> <input type="radio" name="trigger" id="trigger3"> <input type="radio" name="trigger" id="trigger4"> <div id="wrapper"> <div id="slider"> <div id="slide1" class="slide">Slide1</div> <div id="slide2" class="slide">Slide2</div> <div id="slide3" class="slide">Slide3</div> <div id="slide4" class="slide">Slide4</div> </div> </div> </div> </body> </html>