How to apply the animation when css3border rotates
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.
