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