使用CSS3做出带有光晕流星旋转光环的效果
程序员文章站
2022-04-30 10:55:05
...
今天教大家的这一份代码是用CSS3做出带有光晕的流星旋转光环的效果,感兴趣的朋友可以自己动手实践一下,案列代码如下:
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) }
不得不说CSS3还是很强大的,更多精彩请关注其它相关文章!
相关阅读:
以上就是使用CSS3做出带有光晕流星旋转光环的效果的详细内容,更多请关注其它相关文章!