Css 描点

浏览数：30 / 时间：2015年06月09日

<!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 &amp; Consulting</a></li>
                <li><a href="#bg3">My haire is sooo fantastic!</a></li>
                <li><a href="#bg4">Eat healthy &amp; 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>