css3動畫使用技巧之—border旋轉時的應用。

-Advertisement-

css3動畫border旋轉時的應用。效果圖上面代碼中要註意的地方：border-radius: 70px;為70px時div才能顯示為圓形，因為上下左右的border多出...

<html>
    <head>
        <title>css3動畫border旋轉時的應用。</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
        body{
            background: #ccc;
        }
            .he{
                width: 100px;
                height: 100px;
                margin: 200px auto;
                border: 10px solid black;
                border-left-color: #fff;
                border-radius: 70px;
                animation: namemf 1s linear infinite;
                -webkit-animation:namemf 1s linear infinite;
                -ms-animation: namemf 1s linear infinite;
            }
            @keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }
            @-webkit-keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }
            @-ms-keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }
            
        </style>
    </head>
    <body>
        <div class="he">
        
        </div>
    </body>
</html>

效果圖

上面代碼中要註意的地方：

border-radius: 70px;為70px時div才能顯示為圓形，因為上下左右的border多出了20px

 border-left-color: #fff;可以獨立設置一邊的顏色

 animation: namemf 1s linear infinite;中linear為勻速運動
　　　　　　　ease：動畫以低速開始，然後加快，在結束前變慢。
　　　　　　　ease-in：動畫以低速開始
　　　　　　　ease-out：動畫以低速結束

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

使用POI讀取/創建Execl(.xlsx)文件

最近項目中用到瞭解析Execl表格的功能，在網上百度了一下自己寫了一個小Demo。由於項目中使用的是Execl2007，就是尾碼為.xlsx的，所以只研究瞭解析和創建Execl2007的文件，解析Execl2007和Execl2003有一定的區別，大家在解析的時候要註意。一下是Demo中用到的jar...
那些年的知乎爬蟲

一個java 知乎爬蟲程式，使用echart 做圖表展示
Swift 閉包(closure)

Swift中的閉包,就是Objective-C中的Block, 其實兩者是一個東西1.Closure變數的聲明 (1)Closure就是匿名函數，我們可以定義一個閉包變數，而這個閉包變數的類型就是我們上面介紹的“函數類型”。定義一個閉包變數其實就是定義一個特定函數類型的變數，方式如下。因為...
package-info.java文件詳解

歡迎關註我的社交賬號：博客園地址: http://www.cnblogs.com/jiangxinnju/p/4781259.html GitHub地址: https://github.com/jiangxincode 知乎地址: https://www.zhihu.com/people/jia....
傳統線程互斥和同步通信

傳統的線程互斥和同步通信是通過synchronized關鍵字和wait()、notify()方法來實現的。首先介紹下synchronized關鍵字。synchronized 關鍵字，它包括兩種用法：synchronized 方法和 synchronized 塊。1. synchronized 方法：...
phalcon做日報告提交平臺總結

總結：通過開發日報告提交系統，掌握了基本的phalcon框架原理和PHP語言。也瞭解了一些linux常用指令，收穫頗豐。下麵對項目中所遇到的問題進行總結：1.前臺數據傳往後臺所用的三種方法：（1）表單提交form，$this->request->getPost(‘name’);（2）超鏈接, $_G...
轉載:python基礎之模塊

作者：武沛齊出處：http://www.cnblogs.com/wupeiqi/本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。模塊，用一砣代碼實現了某個功能的代碼集合。類似於函數式編程和麵向過程編程，函數式編程則完成一個功能，其他代碼用來調用...
IIS訪問共用文件詳解

前言公司同事做了一個報表系統，需要做集群部署，本來是一件挺容易的事，但是部署過程中卻遇到啦種種蛋疼問題。問題1、我們的報表使用的是微軟的水晶報表，需要上傳報表的配置文件，然後水晶報表提供的控制項來讀取文件，不支持直接圖片伺服器提供的http:www.xxxx.com/a.jpg。但是他支持\\192....