Use the CSS3 to make a halo with a meteor spin halo

This code that teaches you today is the effect of using CSS3 to make a meteor rotating halo with Halo, interested friends can do their own practice, the case listing 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%);p erspective: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% 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)}

Have to say CSS3 is still very powerful, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How to make a CSS3 elastic box

What Web standards are in HTML

CSS3 How to make a responsive layout