今天小编跟大家讲解下有关css3 border旋转时的动画应用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3 border旋转时的动画应用 的相关资料，希望小伙伴们看了有所帮助。
废话不多说了，直接给大家贴代码了，具体代码如下所示：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：动画以低速结束来源：爱蒂网
