css3 border旋转时的动画应用_ Div+Css教程-查字典教程网

摘要：废话不多说了，直接给大家贴代码了，具体代码如下所示：JavaScriptCode复制内容到剪贴板css3动画border旋转时的应用。bod...

废话不多说了，直接给大家贴代码了，具体代码如下所示：

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> 效果图

css3 border旋转时的动画应用1

上面代码中要注意的地方：

border-radius: 70px;为70px时div才能显示为圆形，因为上下左右的border多出了20px

border-left-color: #fff;可以独立设置一边的颜色

animation: namemf 1s linear infinite;中linear为匀速运动

ease：动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始

ease-out：动画以低速结束