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> 

  • 相关阅读:
    【转】【Salesfoece】Salesforce 应用生命周期管理
    【Apex】【Salesfoece】Salesforce 的 package.xml 文件
    【转】【Salesfoece】Apex计划作业框架的实现--用于实现数据的定时自动处理。
    【转】【Salesfoece】Apex 的 Trigger 类简介
    【转】【Salesforce】提高 Visualforce 页面加载效率的小知识
    「这是啥」关于三维偏序
    Javaweb中PO BO VO DTO POJO DAO DO概念理解
    Python多进程、多线程及各自的适用场景
    基于LDA主题模型和SVM的文本分类
    理解accuracy/precision_score、micro/macro
  • 原文地址:https://www.cnblogs.com/loge/p/14985536.html
Copyright © 2011-2022 走看看