通过图片旋转做一个水晶球效果 

<html>
<head>
    <title>水晶球</title>
    <style type="text/css">
        html,body,div,a,font,img{margin:0;padding:0}
        img{border:0}
        @-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
        @-moz-keyframes rotate{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}
        @keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
        #doc{width:980px;margin:0 auto;text-align:left}
        #bd{height:514px; background-color:Gray; background:url(http://images.cnblogs.com/cnblogs_com/wangbogo/441020/r_shuijing.png) no-repeat 285 0; position:relative;}
        .mod-game{position:absolute;width:337px;height:339px;top:26px;left:338px}
        .mod-game .stars
        {
            position:absolute;
            left:0;
            top:0;
            z-index:1;
            width:337px;
            height:339px;
            background:url(http://images.cnblogs.com/cnblogs_com/wangbogo/441020/r_star.png) no-repeat 0 0;
            -webkit-animation-name:rotate;
            -webkit-animation-duration:10.5s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-timing-function:linear;
            -moz-animation-name:rotate;
            -moz-animation-duration:10.5s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-timing-function:linear;
            animation-name:rotate;
            animation-duration:10.5s;
            animation-iteration-count:infinite;
            animation-timing-function:linear
        }
    </style>
</head>
<body>
    <div id="doc" class="page-1">
        <div id="bd">
            <div class="mod-game">
                <div class="stars">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

posted on 2012-12-26 15:41  wboweb  阅读(401)  评论(0)    收藏  举报

导航