實(shí)現(xiàn)如圖所示的點(diǎn)點(diǎn)點(diǎn)loading效果：

一：CSS3 animation實(shí)現(xiàn)代碼

提交訂單中...

css代碼：

.ani_dot{font-family:simsun;

}:root .ani_dot{ /*這里使用Hack是因?yàn)镮E6~IE8瀏覽器下， vertical-align解析不規(guī)范，值為bottom或其他會(huì)改變按鈕的實(shí)際高度*/display:inline-block;width:1.5em;vertical-align:bottom;overflow:hidden;

}@-webkit-keyframes dot{0% { width:0;margin-right:1.5em; }33%{width:.5em;1em; }66%{1em;.5em; }100%{0;}}

.ani_dot{-webkit-animation:dot 3s infinite step-start;

}@keyframes dot{animation:dot 3s infinite step-start;

}

出現(xiàn)的就是如圖所示的結(jié)果。

注意點(diǎn)：

1.IE10+以及其他瀏覽器，點(diǎn)點(diǎn)點(diǎn)動(dòng)畫(huà)消失，IE6-IE9是普通的點(diǎn)點(diǎn)點(diǎn)文字。

2.animate動(dòng)畫(huà)是連續(xù)的，但是我們這兒是一幀一幀的，一卡一卡的，不是那么連續(xù)的效果，用到step-start。

3.上面代碼還用到了css3的選擇器:root。:root為IE9+以及其他現(xiàn)代瀏覽器Hack,IE6-7甚至IE8下，inline-block水平元素的vertical-align:bottom解析與inline水平是有差異的，會(huì)導(dǎo)致高度撐開(kāi)，因此，display:

inline-block要hack處理。

二：動(dòng)畫(huà)(animation)的參數(shù)詳解

由于上面用到了animation動(dòng)畫(huà)，這里詳細(xì)介紹下這個(gè)animation的參數(shù)。

簡(jiǎn)介

CSS動(dòng)畫(huà)(Animations)簡(jiǎn)單說(shuō)就是在一段固定的動(dòng)畫(huà)時(shí)間內(nèi)暗中在某一頻率內(nèi)改變其CSS某個(gè)或某些值,從而達(dá)到視覺(jué)上的轉(zhuǎn)換動(dòng)畫(huà)效果。Animations的很多方面都是可以控制的，包括動(dòng)畫(huà)運(yùn)行時(shí)間，開(kāi)始值和結(jié)束值，還有動(dòng)畫(huà)的暫停和延遲其開(kāi)始時(shí)間等。

語(yǔ)法

= || || || || || || ||

：檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)名稱(chēng)

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類(lèi)型

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)延遲的時(shí)間

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù)

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)

：檢索或設(shè)置對(duì)象動(dòng)畫(huà)的狀態(tài)。w3c正考慮是否將該屬性移除，因?yàn)閯?dòng)畫(huà)的狀態(tài)可以通過(guò)其它的方式實(shí)現(xiàn)，比如重設(shè)樣式

animation

所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性。

animation-name

規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)。就是@keyframes后面跟著的動(dòng)畫(huà)名稱(chēng)，本demo本文中名為dot，意思為“點(diǎn)”。

animation-duration

規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。

animation-timing-function

規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。默認(rèn)是 "ease"。

常見(jiàn)的動(dòng)畫(huà)速度參數(shù)：

linear：線(xiàn)性過(guò)渡。等同于貝塞爾曲線(xiàn)(0.0,0.0,1.0,1.0)

ease：平滑過(guò)渡。等同于貝塞爾曲線(xiàn)(0.25,0.1,0.25,1.0)

ease-in：由慢到快。等同于貝塞爾曲線(xiàn)(0.42,1.0)

ease-out：由快到慢。等同于貝塞爾曲線(xiàn)(0,0.58,1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(xiàn)(0.42,1.0)

step-start：等同于 steps(1,start)

step-end：等同于 steps(1,end)

steps([,[ start | end ] ]?)：接受兩個(gè)參數(shù)的步進(jìn)函數(shù)。第一個(gè)參數(shù)必須為正整數(shù)，指定函數(shù)的步數(shù)。第二個(gè)參數(shù)取值可以是start或end，指定每一步的值發(fā)生變化的時(shí)間點(diǎn)。第二個(gè)參數(shù)是可選的，默認(rèn)值為end。

cubic-bezier(,,)：特定的貝塞爾曲線(xiàn)類(lèi)型，4個(gè)數(shù)值需在[0,1]區(qū)間內(nèi)

animation-delay

規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。也即是指動(dòng)畫(huà)延時(shí)執(zhí)行時(shí)間。

animation-iteration-count

規(guī)定動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。當(dāng)然，我們可以設(shè)置2次，3次，依次遞推。還有個(gè)無(wú)線(xiàn)循環(huán)關(guān)鍵字infinite,也即是反復(fù)循環(huán)播放動(dòng)畫(huà)。

animation-direction

規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"。當(dāng)然還有下列值：

reverse：反方向運(yùn)行

alternate：動(dòng)畫(huà)先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行

alternate-reverse：動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

animation-fill-mode

規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)。

none：默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài)

forwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)

backwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)

both：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài),動(dòng)畫(huà)開(kāi)始之前是"from"或"0%"關(guān)鍵幀；動(dòng)畫(huà)完成之后是"to"或"100%"關(guān)鍵幀狀態(tài)。

animation-play-state

規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。還有個(gè)值paused：暫停。

三：animation動(dòng)畫(huà)實(shí)例

實(shí)例一使用from to：

div{100px;height:background:red;position:relative;mymove 5s infinite;-moz-animation:mymove 5s infinite; FirefoxSafari and Chrome*/

}@keyframes mymove{from {left:0px;}to{left:200px;}}

@-moz-keyframes mymove{ }

@-webkit-keyframes mymove{ }

實(shí)例二使用百分比：

@keyframes myfirst{0% {background:red;left:0px;top:25%{background:yellow;200px;50%{blue;75%{green;}

@-moz-keyframes myfirst{ Firefox}

@-webkit-keyframes myfirst{ Safari 和 Chrome}

@-o-keyframes myfirst{Opera}

實(shí)例三,利用js+Transform和Animation實(shí)現(xiàn)3D動(dòng)畫(huà)

只有webkit內(nèi)核的瀏覽器才能看到相關(guān)3D動(dòng)畫(huà)效果。

實(shí)現(xiàn)效果如圖所示：

css代碼：

body{font-family:'Lucida Grande',Verdana,Arial;font-size:12px;

}#stage{margin:150px auto;width:600px;height:400px;-webkit-perspective:800;

}#rotate{0 auto;-webkit-transform-style:preserve-3d;-webkit-animation-name:x-spin;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;

}.ring{110px;.ring > :nth-child(odd){background-color:#995C7F;

}.ring > :nth-child(even){#835A99;

}.poster{position:absolute;left:250px;100px;opacity:0.7;color:rgba(0,0.9);-webkit-border-radius:10px;

}.poster > p{'Georgia',serif;36px;font-weight:bold;text-align:center;margin-top:28px;

}#ring-1{y-spin;5s;

}#ring-2{back-y-spin;4s;

}#ring-3{3s;

}@-webkit-keyframes x-spin{0% { -webkit-transform:rotateX(0deg); }50%{-webkit-transform:rotateX(180deg); }100%{rotateX(360deg); }}

@-webkit-keyframes y-spin{rotateY(0deg); }rotateY(180deg); }rotateY(360deg); }}

@-webkit-keyframes back-y-spin{}

divid="stage">

="rotate">

="ring-1"class="ring">

總結(jié)

以上是生活随笔為你收集整理的html+div+动画效果,CSS3效果：animate实现点点点loading动画效果（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。