zoukankan html css js c++ java

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- 1024px;
   100%;
  height: auto !important;
  height: 100%;
  position: fixed;
  left: 0;
  z-index:1;
}
.slider{
    position: absolute;
    bottom: 10px;
    text-align: center;
     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]我要用css画幅画(二)
[css]我要用css画幅画(一)
关于学习javascript的一些建议
 孩子们眼中的世界
 全职妈妈再就业辅助计划
 程序员如何打扫卫生并向老婆汇报
 《夏洛特烦恼》观后感
 软件开发之：做“工程”还是做“艺术品”
2014年年度总结

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