Css 描点
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider</title> <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> <link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'> <style type="text/css"> html,body { height: 100%; } img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto !important; height: 100%; position: fixed; left: 0; z-index:1; } .slider{ position: absolute; bottom: 10px; text-align: center; width: 100%; z-index: 200; font-size: 1.5em; } .slideLeft:target { -webkit-animation-name: slideLeft; -webkit-animation-duration: 1s; z-index: 100; } @-webkit-keyframes 'slideLeft' { 0% { -webkit-transform: rotate(-360deg) scale(0.1); } 100% { -webkit-transform: none; } } @-moz-keyframes 'slideLeft' { 0% { -moz-transform: rotate(-360deg) scale(0.1); } 100% { -moz-transform: none; } } @-ms-keyframes 'slideLeft' { 0% { -ms-transform: rotate(-360deg) scale(0.1); } 100% { -ms-transform: none; } } @-o-keyframes 'slideLeft' { 0% { -o-transform: rotate(-360deg) scale(0.1); } 100% { -o-transform: none; } } @keyframes 'slideLeft' { 0% { transform: rotate(-360deg) scale(0.1); } 100% { transform: none; } } .slideBottom:target { z-index: 100; } .zoomIn:target { z-index: 100; } .zoomOut:target { z-index: 100; } .rotate:target { z-index: 100; } </style> </head> <body> <section class="demo"> <div class="slider"> <ul class="clearfix"> <li><a href="#bg1">Hipster Fashion Haircut </a></li> <li><a href="#bg2">Cloud Computing Services & Consulting</a></li> <li><a href="#bg3">My haire is sooo fantastic!</a></li> <li><a href="#bg4">Eat healthy & excersice!</a></li> <li><a href="#bg5">Lips so kissable I could die ...</a></li> </ul> </div> <img src="bg1.jpg" alt="" class="bg slideLeft" id="bg1" /> <img src="bg2.jpg" alt="" class="bg slideBottom" id="bg2" /> <img src="bg3.jpg" alt="" class="bg zoomIn" id="bg3" /> <img src="bg4.jpg" alt="" class="bg zoomOut" id="bg4" /> <img src="bg5.jpg" alt="" class="bg rotate" id="bg5" /> </section> </body> </html>
人如代码，规矩灵活；代码如诗，字句精伦。
