武林網(wǎng)(www.survivalescaperooms.com)文章簡介:今天就為大家分享一組時尚而簡單的鼠標(biāo)經(jīng)過圖標(biāo)動畫效果。主要的原理是當(dāng)經(jīng)過圖標(biāo)或觸發(fā)其偽元素時,利用css的transitions和animations屬性,來實(shí)現(xiàn)的一些互動動畫效果。在此之前,本站也介紹了很多css偽元素的文章,如:動畫條紋邊框、偽元素的多重選擇、制作時尚焦點(diǎn)
今天就為大家分享一組時尚而簡單的鼠標(biāo)經(jīng)過圖標(biāo)動畫效果。主要的原理是當(dāng)經(jīng)過圖標(biāo)或觸發(fā)其偽元素時,利用css的transitions和animations屬性,來實(shí)現(xiàn)的一些互動動畫效果。在此之前,本站也介紹了很多css偽元素的文章,如:動畫條紋邊框、偽元素的多重選擇、制作時尚焦點(diǎn)圖相框等等。
在本示例當(dāng)中用到的HTML結(jié)構(gòu)極其簡單,在一個大的div容器中放了幾個描文本,通過css的樣式控制就可以制作出多種效果出來,如下:
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">這只是本文章中的其中一個示例(6),主要的效果是旋轉(zhuǎn)動畫。
.hi-icon-effect-6 .hi-icon {上面的代碼,只要你熟悉transitions和animations這兩個標(biāo)簽,那就很容易理解。當(dāng)鼠標(biāo)經(jīng)過.hi-icon-effect-6 .hi-icon時背景變成白色rgba(255,255,255,1),然后附帶動畫旋轉(zhuǎn)transform: rotate()360度。其他的示例,大家可以下載附件,好好的看看其中的代碼。
代碼下載:
其實(shí)css3的動畫效果就是這么簡單,只需要給他相對應(yīng)的屬性值以及變換規(guī)則。接下來好好的欣賞這組簡單的鼠標(biāo)經(jīng)過時動畫效果吧。希望可以給你們帶來啟示。
新聞熱點(diǎn)
疑難解答
圖片精選