zoukankan      html  css  js  c++  java
  • 通过图片旋转做一个水晶球效果

    <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>
  • 相关阅读:
    js 定时器 执行一次和重复执行
    Django 会议室预定
    关于跨域介绍和djiago解决跨域问题
    原生Form 和 Form组件 Modelform
    关于Djiango中 前端多对多字段点(,)的显示问题
    Djiango权限组件
    关于 or 判断都是Ture的问题
    基于多对多字段的增删改查
    二.面向对象进阶
    python大数据初探--pandas,numpy代码示例
  • 原文地址:https://www.cnblogs.com/wangbogo/p/2834189.html
Copyright © 2011-2022 走看看