Use CSS3 to create the effect of a halo meteor rotating halo-CSS Tutorial-php.cn

The code I will teach you today is to use CSS3 to create the effect of a meteor rotating halo with a halo. Friends who are interested can practice it themselves. The case 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% 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) }

Copy after login

Not allowed Not to mention CSS3 is still very powerful. For more exciting content, please pay attention to other related articles on the php Chinese website!