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

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!

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.