废话不多说了，直接给大家贴代码了，具体代码如下所示：
JavaScript Code复制内容到剪贴板 <html> <head> <title>css3动画border旋转时的应用。</title> <metacharset="UTF-8"/> <styletype="text/css"> body{ background:#ccc; } .he{ width:100px; height:100px; margin:200pxauto; border:10pxsolidblack; border-left-color:#fff; border-radius:70px; animation:namemf1slinearinfinite; -webkit-animation:namemf1slinearinfinite; -ms-animation:namemf1slinearinfinite; } @keyframesnamemf{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @-webkit-keyframesnamemf{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @-ms-keyframesnamemf{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> </head> <body> <divclass="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：动画以低速结束
【css3 border旋转时的动画应用】相关文章：