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

This article mainly introduces how to use CSS3 to achieve rotation halo effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1.html framework

2. Css complete style

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)

}

Thank you for reading this article carefully. I hope the article "how to use CSS3 to achieve rotating halo effect" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.