css3幻灯片效果

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta content="always" name="referrer">
        <meta name="theme-color" content="#2932e1">
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <style type="text/css" media="screen">
            .al{
               width: 120px;
                height: 120px;
                padding:50px;
                border-radius: 50%;
                background: #14295A; 
                margin: 200px;
            }
            .logo{
                width: 120px;
                height: 120px;                
                background: #14295A; 
                background-repeat: no-repeat;
                background-position: 50% 50%;
                animation: logo 6s linear infinite;
            }
            @-webkit-keyframes logo{0%,33.34%,66.67%{opacity: 0;}10%,33.33%,43.34%,66.66%,76.67%,100%{opacity: 1;}0%,33.34%,66.67%{-webkit-transform:translateY(-30px);}5%,33.33%,38.34%,66.66%,71.67%,100%{-webkit-transform:translateY(0);}0%,33.33%{background-image: url(images/1.png);}33.34%,66.66%{background-image: url(images/2.png);}66.67%,100%{background-image: url(images/3.png);}}
        </style>
</head>  
<body>  
    <div class="al">
        <div class="logo">    
        </div>
    </div>
</body>
</html>  

  

posted @ 2016-04-21 10:25  honely1314  阅读(114)  评论(0编辑  收藏  举报