码迷,mamicode.com
首页 > Web开发 > 详细

Css 描点

时间:2015-03-10 16:45:45      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

Css 描点

标签:

原文地址:http://www.cnblogs.com/xinlinux/p/4326193.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!