動(dòng)畫

創(chuàng)建動(dòng)畫

1. @keyframes run {/* 從 */from{}/* 到 */to{transform: translateX(800px);}}2. @keyframes run2 {0%{}100%{transform: translateY(400px);}

使用動(dòng)畫

animation-name: run;

動(dòng)畫的運(yùn)動(dòng)時(shí)間

animation-duration: 3s;

動(dòng)畫延遲時(shí)間

animation-delay: 1s;

動(dòng)畫的運(yùn)動(dòng)曲線（和過(guò)渡完全一致）

animation -timing-function: steps(5);

動(dòng)畫的運(yùn)動(dòng)次數(shù) infinite無(wú)限次運(yùn)動(dòng)

animation-iteration-count: infinite;

動(dòng)畫的運(yùn)動(dòng)方向

animation-direction: alternate-reverse;normal===正常，從起點(diǎn)運(yùn)動(dòng)到重點(diǎn)reverse===反轉(zhuǎn)，從重點(diǎn)運(yùn)動(dòng)到起點(diǎn)alternate====正反交替alternate-reverse===反正交替

動(dòng)畫的播放狀態(tài)

animation-play-state: paused;running===運(yùn)動(dòng)paused===暫停一般要結(jié)合鼠標(biāo)一起使用

簡(jiǎn)寫方式：

animation:需要什么值就寫什么 注意：運(yùn)動(dòng)時(shí)間和延遲時(shí)間有書寫順序，其他沒有（運(yùn)動(dòng)時(shí)間在前，延遲時(shí)間在后）

畫圓，半圓，扇形

要想畫一個(gè)好看的半圓:一般建議寬度和高度做好2倍關(guān)系加圓角的時(shí)候圓角的值直接寫寬高其中最大值的一半即可。1個(gè)值：上下左右4個(gè)角同時(shí)變化2個(gè)值：左上角和右下角 右上角和左下角3個(gè)值：左上 右上和左下 右下4個(gè)值：左上 右上 右下 左下 順時(shí)針的賦值順序

3d變形transform

坐標(biāo)軸：

x軸：向右為正，向左為負(fù)y軸：向下為正，向上為負(fù)z軸：向前為正，向后為負(fù)

要想看到3d的效果

1.必須給想要呈現(xiàn)3d效果的元素找一個(gè)父親，在這個(gè)大盒子上要寫，transform-style: preserve-3d;2.必須適當(dāng)?shù)淖?d空間(3d舞臺(tái))旋轉(zhuǎn)一下

值

1.位移translatetransform: translateZ(0px);2.旋轉(zhuǎn)rotaterotateZ===圍繞z軸做旋轉(zhuǎn)，其實(shí)圍繞中心點(diǎn)旋轉(zhuǎn)。3.縮放scale

總結(jié)

以上是生活随笔為你收集整理的动画和3D的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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