How to use CSS3 Animation to realize highlight Arc effect
Editor to share with you how to use CSS3 animation to achieve highlight arc effect, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The code is as follows:
CSS3 Animation to achieve highlight Arc effect
Body {margin:0;padding:0;}
.box {width:1000px;margin:200px auto;height:500px;position:relative;text-align:center;}
.box: hover .rolled {
-webkit-animation-play-state:paused
-moz-animation-play-state:paused
-o-animation-play-state:paused
-ms-animation-play-state:paused
}
.rolled {
Position:absolute
Top: 0
Width:80px
Height:500px
Background:-moz-linear-gradient (left,rgba (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)
Background:-webkit-gradient (linear,left top,right top,color-stop (0% background), color-stop (50%), color-stop (100%))
Background:-webkit-linear-gradient (left,rgba (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)
Background:-o-linear-gradient (left,rgba (255pcmgba (255pcmg0) 0) 50% werergba (255pcgba (255pcg0) 100%)
-webkit-transform: skewX (- 25deg)
-moz-transform: skewX (- 25deg)
-webkit-animation:rolled 2.5s .2s ease both infinite
-moz-animation:rolled 2.5s .2s ease both infinite
-o-animation:rolled 2.5s .2s ease both infinite
-ms-animation:rolled 2.5s .2s ease both infinite
Overflow: hidden
}
@-webkit-keyframes rolled {
0% {left:-150px;}
100% {left:920px;}
}
@-moz-keyframes rolled {
0% {left:-150px;}
100% {left:920px;}
}
@-o-keyframes rolled {
0% {left:-150px;}
100% {left:920px;}
}
@-ms-keyframes rolled {
0% {left:-150px;}
100% {left:920px;}
}
@ keyframes rolled {
0% {left:-150px;}
100% {left:920px;}
}
.
The above is all the content of this article "how to use CSS3 animation to achieve highlight arc effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
