一款純css3實現的超炫動畫背畫特效

2022-02-14 12:44:14 字數 3550 閱讀 4403

之前為大家介紹了很多款由純css3實現的特效。今天要再給大家帶來一款純css3實現的超炫動畫背畫特效。**非常簡單,沒有引用任何其它js**。css**也不多。效果非常炫。一起看下效果圖:

實現的**。

html**:

<

div

class

='fake-gif'

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

<

span

class

='stripe'

>

span

><

span

class

='stripe'

>

span

>

div>

css3**:

body.fake-gif .fake-gif .stripe .fake-gif .stripe:nth-child(odd) .fake-gif .stripe:nth-child(even) .fake-gif .stripe:nth-child(4n+1) .fake-gif .stripe:nth-child(4n+2) .fake-gif .stripe:nth-child(4n+3) .fake-gif .stripe:nth-child(4n) .fake-gif .stripe:nth-child(2) .fake-gif .stripe:nth-child(4) .fake-gif .stripe:nth-child(6) .fake-gif .stripe:nth-child(8) .fake-gif .stripe:nth-child(10) .fake-gif .stripe:nth-child(12) .fake-gif .stripe:nth-child(14) .fake-gif .stripe:nth-child(16) .fake-gif .stripe:nth-child(18) .fake-gif .stripe:nth-child(20) .fake-gif .stripe:nth-child(22) .fake-gif .stripe:nth-child(24) .fake-gif .stripe:nth-child(26) .fake-gif .stripe:nth-child(1) .fake-gif .stripe:nth-child(3) .fake-gif .stripe:nth-child(5) .fake-gif .stripe:nth-child(7) .fake-gif .stripe:nth-child(9) .fake-gif .stripe:nth-child(11) .fake-gif .stripe:nth-child(13) .fake-gif .stripe:nth-child(15) .fake-gif .stripe:nth-child(17) .fake-gif .stripe:nth-child(19) .fake-gif .stripe:nth-child(21) .fake-gif .stripe:nth-child(23) .fake-gif .stripe:nth-child(25) @-webkit-keyframes move-y 50% }

@-webkit-keyframes move 50% }

@keyframes move-y 50% }

@-webkit-keyframes move-x 50% }

@keyframes move-x 50% }

一款純css3實現的動畫按鈕

今天給大家分享一款純css3實現的動畫按鈕。第一排的按鈕當滑鼠經過的背景色動畫切換,圖示從右側飛入,第二排的按鈕當滑鼠經過的時候邊框動畫切換,圖示右側飛入,效果非常好,一起看下效果圖 實現的 html div class black a href class btn span become a me...

一款純css3實現的動畫載入導航

之前為大家介紹了好幾款導航選單,今天為給大家再帶來一款純css3實現的動畫載入導航。該導航出現的時候以動畫的形式出現。效果圖如下 實現的 html ul class main menu li class main menu item active a href home a li li class ...

一款純css3實現的動畫載入導航

之前為大家介紹了好幾款導航選單,今天為給大家再帶來一款純css3實現的動畫載入導航。該導航出現的時候以動畫的形式出現。效果圖如下 實現的 html ul class main menu li class main menu item active a href home a li li class ...