CSS3扁平化Loading動畫特效

2021-09-07 09:45:19 字數 3495 閱讀 2689

效果預覽：

**如下：



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>css3旋轉載入效果_何問起


title


>


<


style


>


body 


.container 


.canvas 


/*spinner 1 starts here 


*/.spinner1 


.spinnermax 


.spinnermid 


.spinnermin 


@keyframes spinnerone 


100% }/*


spinner 1 ends here 


*//*


spinner 2 starts here 


*/.canvas2 


.spinner2 


.hourhand 


.dot 


@keyframes spinnertwo 


100% }/*


spinner 2 ends here 


*//*


spinner 3 starts here 


*/.spinner3 


@keyframes spinnerthree 


20%, 50% }/*


spinner 3 ends here 


*//*


spinner 4 starts here 


*/.spinner4 


@keyframes spinnerfour 


100% }/*


spinner 4 ends here 


*//*


spinner 5 starts here 


*/.spinner5 


@keyframes spinnerfive 


50% 


100% }/*


spinner 5 ends here 


*//*


spinner 6 starts here 


*/.spinner6 


.p1 


.p2 


.p3 


.p4 


@keyframes fall 


25%, 75% 


100% }/*


spinner 6 ends here 


*/@media (max-width: 600px) 


.canvas 


}style


>


head


>


<


body


>


<


div 


class


="container"


>


<


div 


class


="canvas canvas1"


>


<


div 


class


="spinner1 spinnermax"


>


<


div 


class


="spinner1 spinnermid"


>


<


div 


class


="spinner1 spinnermin"


>


div>


div>


div>


div>


<


div 


class


="canvas canvas2"


>


<


div 


class


="spinner2"


>


div>


<


div 


class


="hourhand"


>


div>


<


div 


class


="dot"


>


div>


div>


<


div 


class


="canvas canvas3"


>


<


div 


class


="spinner3"


>


div>


div>


<


div 


class


="canvas canvas4"


>


<


div 


class


="spinner4"


>


div>


div>


<


div 


class


="canvas canvas5"


>


<


div 


class


="spinner5"


>


div>


div>


<


div 


class


="canvas canvas6"


>


<


div 


class


="spinner6 p1"


>


div>


<


div 


class


="spinner6 p2"


>


div>


<


div 


class


="spinner6 p3"


>


div>


<


div 


class


="spinner6 p4"


>


div>


div>


div>


<


div 


style


="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft yahei';color:#ffffff"


>


<


p>適用瀏覽器：firefox、chrome、opera、edge、傲遊、搜狗、世界之窗. 不支援ie8及以下瀏覽器。


p>


href


=""target


="_blank"


>何問起


a>


<


a href


="h/bjag/1afxdrm7.htm"


target


="_blank"


>檢視**


a>


p>


div>


body


>


html


>

特效彙總：

CSS3扁平化Loading動畫特效

效果預覽 如下 doctype html html head meta charset utf 8 title css3旋轉載入效果 何問起 title style body container canvas spinner 1 starts here spinner1 spinnermax spi...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

css3新動 css3新增動畫

1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...