css3實現三種不同的loading載入動畫效果

2021-07-29 20:45:35 字數 1442 閱讀 5389

html：

class="box">


class="loader">


class="loading-1">


i>


div>


div>


class="loader">


class="loading-2">


i>


i>


i>


i>


i>


div>


div>


class="loader">


class="loading-3">


i>


i>


i>


i>


i>


i>


i>


i>


div>


div>


div>css：


.box


.loader


/*第一種動畫載入開始*/


.loading-1


@-webkit-keyframes loading-1


50%100%


}.loading-1


i/*第一種動畫載入結束*/


/*第二種動畫載入開始*/


@-webkit-keyframes loading-2


50%100%


}.loading-2


i.loading-2


i:nth-child(1)


.loading-2


i:nth-child(2)


.loading-2


i:nth-child(3)


.loading-2


i:nth-child(4)


.loading-2


i:nth-child(5)


/*第二種動畫載入結束*/


/*第三種動畫載入開始*/


@-webkit-keyframes loading-3


100%


}.loading-3


.loading-3


i.loading-3


i:nth-child(1)


.loading-3


i:nth-child(2)


.loading-3


i:nth-child(3)


.loading-3


i:nth-child(4)


.loading-3


i:nth-child(5)


.loading-3


i:nth-child(6)


.loading-3


i:nth-child(7)


.loading-3


i:nth-child(8)


/*第三種動畫載入結束*/
效果：

CSS3實現10種Loading效果

原文 昨晚用css3實現了幾種常見的loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記 第1種效果 如下 loading loading span webkit keyframes load 50 loading span nth child 2 loading span nth c...

三種不同的分頁方式

習慣了ext的ext.grid.gridpanel與ext.data.store封裝好了的分頁方式以及 ajax處理方式 ext.ajax.request success function response,action 和對後台響應json的處理 ext.ajax.request success ...

CSS的三種定位

css的三種引用方式 相對定位 relative 絕對定位 absolute 固定定位 fixed 被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。lang en charse...