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

2022-02-14 12:44:13 字數 1791 閱讀 8851

之前為大家介紹了好幾款導航選單,今天為給大家再帶來一款純css3實現的動畫載入導航。該導航出現的時候以動畫的形式出現。效果圖如下:

實現的**。

html**:

<

ul class

="main-menu"

>

<

li class

="main-menu-item active"

><

a href

="#"

>home

a>

li><

li class

="main-menu-item"

>

<

a href

="#"

>about us

a>

li><

li class

="main-menu-item"

><

a href

="#"

>another link

a>

li><

li

class

="main-menu-item"

><

a href

="#"

>and another

a>

li><

li class

="main-menu-item"

><

a

href

="#"

>stuff

a>

li><

li class

="main-menu-item"

><

a href

="#"

>help

a>

li><

li class

="main-menu-item"

>

<

a href

="#"

>contact

a>

li>

ul>

css**:

*, *:after, *:before html, body .main-menu .main-menu::after,

.main-menu-item.active::after .main-menu::after @-webkit-keyframes menuline }

@keyframes menuline }

@-webkit-keyframes menuitem }

@keyframes menuitem }

.main-menu-item a .main-menu-item:nth-child(4) a .main-menu-item:nth-child(3) a, .main-menu-item:nth-child(5) a .main-menu-item:nth-child(2) a, .main-menu-item:nth-child(6) a .main-menu-item:nth-child(1) a, .main-menu-item:nth-child(7) a .main-menu-item .main-menu-item:hover a, .main-menu-item.active .main-menu-item:hover a::after, .main-menu-item.active::after

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

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

一款純css3實現的動畫按鈕

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

一款純css3實現的條紋載入條

之前為大家帶來了很多載入動畫。基於prefixfree.js的進度載入條 基於jquery帶百分比的響應式進度載入條。今天給大家分享一款純css3實現的條紋載入條。帶有響應式的效果。效果圖如下 實現的 html div class container div class warning div di...