Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the application of css3border rotation animation, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

No more nonsense, just paste the code to everyone, the specific code is as follows:

JavaScript

Application of css3 animation when border rotates. 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);}}

Effect picture

What to pay attention to in the above code:

Border-radius: 70px; div can only be displayed as a circle when it is 70px, because there is more border up and down than 20px.

Border-left-color: # fff; can set the color of one side independently

Animation: linear in namemf 1s linear infinite; moves at a uniform speed

Ease: the animation starts at a low speed, then speeds up, and slows down before it ends.

Ease-in: animation starts at a low speed

Ease-out: the animation ends at a low speed

After reading the above, do you have any further understanding of the application of css3border rotation animation? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.