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> 

  • 相关阅读:
    运行自动安装apk代码,报错: Original error: Could not find aapt Please set the ANDROID_HOME environment variable with the Android SDK root directory path.
    已安装Appium-Python-Client,但appium无法导入WebDriver
    打开uiautomatorviewer.bat闪退
    常见的python面试题【杭州多测师】【python笔试题】
    支付功能怎么测试?
    自动化运维工具——ansible详解
    服务端编程——异常+校验器+环境变量
    服务端编程——初始koa
    用postman发送请求,在koa中获取的请求body为undefined
    jQuery入口函数测试
  • 原文地址:https://www.cnblogs.com/loge/p/14985536.html
Copyright © 2011-2022 走看看