动画和3d变形
一、概念
???????????過(guò)渡：一般需要結(jié)合鼠標(biāo)去使用
? ? ? ? ? ? 動(dòng)畫(huà)：一運(yùn)行自己動(dòng)起來(lái)
二?、創(chuàng)建動(dòng)畫(huà)
? ? ? ? 方式一：@keyframes 動(dòng)畫(huà)的名字{from{}to{}}
? ? ? ? 方式二：@keyframes 動(dòng)畫(huà)的名字{0%{}...100%{}}
三、?使用動(dòng)畫(huà)：
? ? ? ? 必須要寫(xiě)的：
? ? ? ? ? ?① animation-name====動(dòng)畫(huà)的名字
? ? ? ? ? ②? animation-duration===動(dòng)畫(huà)的運(yùn)動(dòng)時(shí)間
? ? ? ? 其他的：
? ? ? ? ? ? ③animation-delay===延遲時(shí)間
? ? ? ? ? ? ④animation-timing-function===動(dòng)畫(huà)的運(yùn)動(dòng)曲線（和過(guò)渡完全一致）
? ? ? ? ? ? ⑤animation-iteration-count===動(dòng)畫(huà)的運(yùn)動(dòng)次數(shù)
? ? ? ? ? ? ⑥animation-direction===動(dòng)畫(huà)的運(yùn)動(dòng)方向
????????????????取值 ：? ? ? ?
? ? ? ? ? ? ? ? ? ? normal===正常，從起點(diǎn)運(yùn)動(dòng)到重點(diǎn)
? ? ? ? ? ? ? ? ? ? reverse===反轉(zhuǎn)，從重點(diǎn)運(yùn)動(dòng)到起點(diǎn)
? ? ? ? ? ? ? ? ? ? alternate====正反交替
? ? ? ? ? ? ? ? ? ? alternate-reverse===反正交替
? ? ? ? ? ?⑦ animation-play-state===動(dòng)畫(huà)的播放狀態(tài)
? ? ? ? ? ? ? ? 取值：
????????????????????????running===運(yùn)動(dòng)===默認(rèn)值
? ? ? ? ? ? ? ????????? paused===暫停
? ? ? ? 重要：簡(jiǎn)寫(xiě)方式： animation:需要什么值就寫(xiě)什么
? ? ? ? 注意：運(yùn)動(dòng)時(shí)間和延遲時(shí)間有書(shū)寫(xiě)順序，其他沒(méi)有（運(yùn)動(dòng)時(shí)間在前，延遲時(shí)間在后）
四、半圓的知識(shí)
語(yǔ)法：?border-radius: ；
?????????????????1個(gè)值：上下左右4個(gè)角同時(shí)變化
? ? ? ? ? ? ? ? 2個(gè)值：左上角和右下角 ?右上角和左下角
? ? ? ? ? ? ? ? 3個(gè)值：左上 ? 右上和左下 ?右下
? ? ? ? ? ? ? ? 4個(gè)值：左上 右上 ?右下 ?左下 順時(shí)針的賦值順序
五、3d變形
①位移語(yǔ)法：transform：translatex/y/z（數(shù)值px）
? ? 坐標(biāo)軸：
? ? ? ? x軸：向右為正，向左為負(fù)
? ? ? ? y軸：向下為正，向上為負(fù)
? ? ? ? z軸：向前為正，向后為負(fù)
? ? 屬性值：
? ? ? ? ? ?1.位移translate
? ? ????????2.旋轉(zhuǎn)rotate
? ????????? 3.縮放scale
? ? 注意：要想看到3d的效果
? ? ? ? 1.必須給想要呈現(xiàn)3d效果的元素找一個(gè)父親，在這個(gè)大盒子上要寫(xiě)
? ? ? ? ? ? ?transform-style: preserve-3d;
? ? ? ? 2.必須適當(dāng)?shù)淖?d空間(3d舞臺(tái))旋轉(zhuǎn)一下
②旋轉(zhuǎn)語(yǔ)法：transform: rotateY/x/z(數(shù)值deg);
③縮放語(yǔ)法：?transform: scaleX/y/z(數(shù)值);
總結(jié)
- 上一篇： 关于pip2和pip3共存问题的解决办法
- 下一篇： 哈工大软件构造Lab1实验报告