How to realize the Animation effect of search and wait by css3
This article mainly introduces css3 how to achieve search and wait animation effect, the article is very detailed, has a certain reference value, interested friends must read it!
* {
Margin:0
Padding:0
}
. load-icon {
Left:0
Right:0
Bottom:0
Top:0
Margin:auto
Display:flex
Justify-content:center
Align-items:center
Position:fixed
}
.load-icon > div {
Width:100px
Height:100px
Border-radius:50%
Border:8pxsolidtransparent
Border-left-color:rgba (35, 196, 81, and 1)
Animation:animate1slinearinfinite
}
.load-icon > span {
Position:absolute
Color:#fff
Text-shadow:1px3px5px#333
Width:80px
Height:80px
Border:8pxsolidtransparent
Overflow:hidden
Display:flex
Justify-content:center
Align-items:center
}
.load-icon > span > I {
Font-size:50px
Animation:animate13slinearinfinite
}
.load-icon > span > span {
Font-size:50px
Animation:shadow3slinearinfinite
Color:rgba (35, 196, 81, and 1)
Overflow:hidden
Position:absolute
Top:13px
}
@ keyframesanimate {
0% {transform:rotate (0deg); box-shadow:inset005pxrgba (35 dint 196pi 81)}
50% {box-shadow:inset005pxrgba (35, 196, 81, 1)}
100% {transform:rotate (360deg); box-shadow:inset005pxrgba (35pr 196pl 81)}
}
@ keyframesanimate1 {
0% {transform:translate3d (150% Person0);}
30% {transform:translate3d (0% focus 0);}
70% {transform:translate3d (0% focus 0);}
100% {transform:translate3d (- 150% Percience 0);}
}
@ keyframesshadow {
0% {transform:translate3d (150% Person0); height:0%}
30% {transform:translate3d (0% transform:translate3d 0); height:0%}
70% {transform:translate3d (0% transform:translate3d 0); height:100%}
100% {transform:translate3d (- 150% Person0); height:100%}
}
The above is all the contents of the article "how to search and wait for Animation effects in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
