How to use css to make the effect of meteor rotating ring
This article mainly introduces "how to use css to make meteor rotating halo effect". In daily operation, I believe many people have doubts about how to use css to make meteor rotating halo effect. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use css to make meteor rotating halo effect". Next, please follow the editor to study!
The code is as follows:
Html {
Width: 100%
Height: 100%
}
Body {
Width: 100%
Height: 100%
Overflow: hidden
Background-image:-webkit-linear-gradient (90deg, # 395ecb 0%, # 3657be 35%, # 242161 75%, # 1a0531 100%)
Background-image:-moz-linear-gradient (90deg, # 395ecb 0%, # 3657be 35%, # 242161 75%, # 1a0531 100%)
Background-image:-ms-linear-gradient (90deg, # 395ecb 0%, # 3657be 35%, # 242161 75%, # 1a0531 100%)
Background-image: linear-gradient (0deg, # 395ecb 0%, # 3657be 35%, # 242161 75%, # 1a0531 100%)
Perspective: 1000px
}
.bg0 {
Width: 500px
Height: 500px
Top: 50%
Left: 50%
Transform: translate (- 50%,-50%)
Background: url (.. / images/bg0.png) no-repeat center center
Background-size: 150%
}
.bg1 {
Width: 100%
Height: 100%
Background: url (.. / images/bg1.png) no-repeat center center
}
. hx-box {
Top: 50%
Left: 50%
Width: 500px
Height: 500px
Transform-style: preserve-3d
Transform: translate (- 50%,-50%) rotateY (75deg)
}
. hx-box ul {
Width: 500px
Height: 500px
Transform-style: preserve-3d
Animation:hxz 20s linear infinite
}
@ keyframes hxz {
0% {
Transform: rotateX (0deg)
}
100% {
Transform: rotateX (- 360deg)
}
}
. hx-box ul li {
Width: 500px
Height: 500px
Border: 4px solid # 5ec0ff
Border-radius: 1000px
}
. hx-box ul li span {
Display: block
Width: 100%
Height: 100%
Background: url (.. / images/hx.png) no-repeat center center
Background-size: 100%
Animation: hx 4s linear infinite
}
@ keyframes hx {
To {
Transform: rotate (360deg)
}
}
. hx-k2 {
Transform: rotateX (60deg) rotateZ (60deg)
}
. hx-k3 {
Transform: rotateX (- 60deg) rotateZ (- 60deg)
}
At this point, the study on "how to use css to make meteor rotating halo effect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
