效果預覽:
**如下:
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 運動時...