zoukankan      html  css  js  c++  java
  • html css 旋转 圆

    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-3.1.1.min.js"></script>

        <style type="text/css">
            .circleHome {
            }
            .circle {
                position:absolute;
                top:10px;
                left:10px;
                display: none;
                border-radius: 50%;
                height: 300px;
                300px;
                margin: 0;
                border:10px solid #ff0;
            }
            .circle2 {
                position: relative;
                top: 10px;
                left: 10px;
                display: block;
                border-radius: 50%;
                height: 300px;
                300px;
                margin: 0;
                border-top: 10px solid #f00;
                border-right: 10px solid #ff0;
                border-bottom: 10px solid #ff0;
                border-left: 10px solid #ff0;
            }
        </style>
        <script type="text/javascript">

            $(function () {
                var $elie = $(".circle2");// $(selectorForElementsToRotate);
                rotate(0);
                function rotate(degree) {

                    // For webkit browsers: e.g. Chrome
                    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)' });
                    // For Mozilla browser: e.g. Firefox
                    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' });
                    // For Mozilla browser: e.g. IE
                    $elie.css({ 'transform': 'rotate(' + degree + 'deg)' });

                    // Animate rotation with a recursive call
                    setTimeout(function () { rotate(++degree); }, 1);
                }
            });

        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>111</div>
            <div class="circleHome">
                <div class="circle"></div>
                <div class="circle2"></div>
            </div>
            <div>222</div>
        </form>
    </body>
    </html> 

  • 相关阅读:
    iOS-iOS8模拟器设置中文键盘
    iOS-应用性能调优的25个建议和技巧
    IOS-通讯录
    IOS-录音
    IOS-视频
    IOS-音乐
    IOS-音效
    iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式
    Android 带你玩转实现游戏2048 其实2048只是个普通的控件(转)
    Android TagFlowLayout完全解析 一款针对Tag的布局(转)
  • 原文地址:https://www.cnblogs.com/loge/p/14985536.html
Copyright © 2011-2022 走看看