這篇文章主要介紹“CSS3怎么實(shí)現(xiàn)給頭像加個(gè)光芒四射且旋轉(zhuǎn)的背景動(dòng)畫效果”，在日常操作中，相信很多人在CSS3怎么實(shí)現(xiàn)給頭像加個(gè)光芒四射且旋轉(zhuǎn)的背景動(dòng)畫效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3怎么實(shí)現(xiàn)給頭像加個(gè)光芒四射且旋轉(zhuǎn)的背景動(dòng)畫效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

公司主營(yíng)業(yè)務(wù)：做網(wǎng)站、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出江源免費(fèi)做網(wǎng)站回饋大家。

HTML代碼

HTML代碼結(jié)構(gòu)很簡(jiǎn)單，跟之前那篇文章使用的相同：

代碼如下:

最外面的div作為父元素，它的position是relative，有固定的高和寬度，有兩個(gè)子元素：一個(gè)用來(lái)放logo，一個(gè)用來(lái)做光芒效果的容器。

CSS代碼

我們這里要用純CSS來(lái)實(shí)現(xiàn)，需要使用CSS3的動(dòng)畫技術(shù)，這里用到的CSS語(yǔ)法是@keyframes。我們的基本實(shí)現(xiàn)原理是用keyframes，從rotate(0deg)旋轉(zhuǎn)到rotate(360deg)：

代碼如下:

/* 用來(lái)實(shí)現(xiàn)動(dòng)畫的keyframes;  從0度旋轉(zhuǎn)到360度 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 實(shí)現(xiàn)光線輻射效果 */
#raysDemoHolder {
position: relative;
width: 490px;
height: 490px;
margin: 100px 0 0 200px;
}
#raysLogo {
width: 300px;
height: 233px;
text-indent: -3000px;
background: url(logo.png) 0 0 no-repeat;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#rays { /* 表現(xiàn)動(dòng)畫效果 */
background: url(rays.png) 0 0 no-repeat;
position: absolute;
top: -100px;
left: -100px;
width: 490px;
height: 490px;

/* microsoft ie */
animation-name: spin;
animation-duration: 40000ms; /* 40 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#rays:hover {
/* animation-duration: 10000ms;*/
       /* 10 seconds - speed it up on hover! */
/* resets the position though!  sucks */
}

通過(guò)使用animation-timing-function, animation-duration, 和 animation-iteration-count，我們就能實(shí)現(xiàn)線性勻速、旋轉(zhuǎn)不停的動(dòng)畫效果！你會(huì)發(fā)現(xiàn)使用純CSS制作的動(dòng)畫比用js制作的動(dòng)畫要順滑的多。

現(xiàn)在我們有了一個(gè)問(wèn)題，早期的Opera瀏覽器不支持@keyframes語(yǔ)法。幸運(yùn)的是，我們可以通過(guò)其它方法實(shí)現(xiàn)這個(gè)動(dòng)畫：

代碼如下:

/* boooo opera */
-o-transition: rotate(3600deg); /* 可用 */

只需要簡(jiǎn)單的一段代碼。而對(duì)于IE瀏覽器，我試圖用-ms-transform / -ms-translation在IE9里運(yùn)行它，但不好用。從IE10才開(kāi)始支持keyframes語(yǔ)法。

到此，關(guān)于“CSS3怎么實(shí)現(xiàn)給頭像加個(gè)光芒四射且旋轉(zhuǎn)的背景動(dòng)畫效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！