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 運動時...