CSS3實現10種Loading效果

2022-03-23 13:51:07 字數 4002 閱讀 7165

原文：

昨晚用css3實現了幾種常見的loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記……

第1種效果：

**如下：



.loading


.loading span


@-webkit-keyframes load


50%}


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)
第2種效果：

**如下：



.loading


.loading span


@-webkit-keyframes changebgcolor


100%


}@-webkit-keyframes changeposition


100%


}
第3-5種效果：

**如下：
第3-5種效果的css樣式分別為：

.loading


.loading span


.loading span:last-child


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)


.loading


.loading span


.loading span:last-child


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)


.loading


.loading span


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)
第6-8種效果：

**如下：
第6-8種效果的css樣式分別為：

.loading


.loading span


.loading span:last-child


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)


.loading


.loading span


.loading span:last-child


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)


.loading


.loading span


.loading span:last-child


@-webkit-keyframes load


100%


}.loading span:nth-child(1)


.loading span:nth-child(2)


.loading span:nth-child(3)


.loading span:nth-child(4)


.loading span:nth-child(5)
第9-10種效果：

**如下：
css樣式分別為：

.loadeffect


.loadeffect span


@-webkit-keyframes load


100%


}.loadeffect span:nth-child(1)


.loadeffect span:nth-child(2)


.loadeffect span:nth-child(3)


.loadeffect span:nth-child(4)


.loadeffect span:nth-child(5)


.loadeffect span:nth-child(6)


.loadeffect span:nth-child(7)


.loadeffect span:nth-child(8)


.loadeffect


.loadeffect span


@-webkit-keyframes load


100%


}.loadeffect span:nth-child(1)


.loadeffect span:nth-child(2)


.loadeffect span:nth-child(3)


.loadeffect span:nth-child(4)


.loadeffect span:nth-child(5)


.loadeffect span:nth-child(6)


.loadeffect span:nth-child(7)


.loadeffect span:nth-child(8)

css3實現陰影

最近在學習html與css3基礎，看到有一節課用css3實現曲線陰影與翹邊陰影，便將這個做了出來。基本 實現如下 學完這個知識點後，總結了一下用到的知識點，實質上做出來的陰影效果是讓陰影重疊。1 陰影設定顏色和透明度時，用rgba,直接設定。box shadow 10px 10px 10px 10p...

css3光束 CSS3實現光束和波浪

頁面html 人生在旅途，需要您的指引 樣式 語法解析 animation 屬性是乙個簡寫屬性，用於設定六個動畫屬性 animation name duration timing function delay iteration count direction keyframes定義和用法 通過 k...

介紹 10 個 CSS3 屬性

the css ul a a hover transition 有三個引數 the property to transition.set this value to all if needed 轉換屬性。設定此值為所有如有需要 the duration 持續時間 the easing type 緩動...