CSS3實(shí)現(xiàn)旋轉(zhuǎn)光環(huán)效果代碼

1、css3實(shí)現(xiàn)旋轉(zhuǎn)光環(huán)效果代碼1.html框架2. css完整樣式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%);

2、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

3、(./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

4、: 500px;height: 500px;transform-style: preserve-3d;animation:hxz 20s linear infinite;keyframes hxz0% 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) ro