這篇文章主要介紹了怎么使用CSS3實現旋轉光環(huán)效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注于伊吾網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供伊吾營銷型網站建設，伊吾網站制作、伊吾網頁設計、伊吾網站官網定制、微信小程序開發(fā)服務，打造伊吾網絡公司原創(chuàng)品牌,更為您提供伊吾網站排名全網營銷落地服務。

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%);

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實現旋轉光環(huán)效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!