題外話:這節(jié)課非常有意思哦~可以讓元素動起來啦
文章內(nèi)容輸出來源:拉勾教育大前端就業(yè)集訓(xùn)營
1.概述
- CSS3出現(xiàn)之前缠诅,前端一般使用Flash動畫或JavaScript制作動畫刺彩。
- flash采用幀動畫的形式制作動畫,通過一幀一幀的畫面按照固定的順序和速度播放,比如說老式膠片電影玄帕。
老式膠卷電影的經(jīng)典開頭晨缴。
2.過渡屬性
概述:在不使用Flash和js的情況下,使用過度屬性可自動實(shí)現(xiàn)動畫效果远搪。
當(dāng)前元素只要有“屬性”發(fā)生變化時劣纲,即存在A和B兩種狀態(tài),使用過渡屬性谁鳍,即可實(shí)現(xiàn)A和B之間的平滑過渡動畫效果癞季。屬性寫法:transition:過渡的屬性 過渡時間 運(yùn)動曲線 延時時間;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
transition: width 0.2s linear 0s;
}
.box:hover{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
說明:transition設(shè)置的意思是:“當(dāng)該元素的width屬性發(fā)生變化時,使變化過渡0.2s實(shí)現(xiàn)倘潜,使用線性的變化方式绷柒,延遲0s開始過渡。
因?yàn)閠ransition屬性沒有監(jiān)視height屬性涮因,所以就算height變化了废睦,也是直接變化而沒有過渡動畫。
單一屬性
transition-property過渡的屬性
-
屬性值:
- none:表示沒有屬性過渡养泡;
- all:表示所有變化的屬性都過渡郊楣;
- 屬性名:使用具體屬性名憔恳,多個屬性名用逗號隔開。
transition-duration和transition-delay
- 概述:duration是過渡的時間長度净蚤,delay是在過渡前的延遲時間钥组。
- 屬性值:以s為單位的時間長度,就算是0也要加單位s今瀑。
transition-timing-function時間曲線
- 概述:動畫在播放時遵循的時間曲線程梦。
- 屬性值:
屬性值 | 描述 |
---|---|
linear | 規(guī)定以恒定的速度實(shí)現(xiàn)從開始到結(jié)束的效果 |
ease | 規(guī)定慢速開始,然后變快橘荠,然后慢速結(jié)束的效果 |
ease-in | 規(guī)定以慢速開始屿附,逐漸加速的效果 |
ease-out | 規(guī)定以快速開始,逐漸減速的效果 |
ease-in-out | 規(guī)定以慢速開始和結(jié)束的效果 |
cubic-bezier(x1,y1,x2,y2) | 用兩個點(diǎn)的坐標(biāo)值哥童,計算出一條貝塞爾曲線挺份,作為動畫的時間曲線 |
說明:如圖所示,貝塞爾曲線是由兩個點(diǎn)計算得到的一條時間曲線贮懈,所以在cubic-bezier()中匀泊,只需要提供兩個點(diǎn),就可以指定一條你自定義的時間曲線朵你。
兼容性:IE10各聘、Firefox、Chrome以及Opera瀏覽器支持transition屬性抡医。Safari需要加前綴-webkit-躲因。
3.2D轉(zhuǎn)換
- 概述:對元素進(jìn)行移動、縮放忌傻、旋轉(zhuǎn)大脉、拉長或拉伸。配合過渡和即將學(xué)習(xí)的動畫知識水孩,幾乎可以完全取代Flash箱靴。
- 屬性名:transform
- 屬性值:根據(jù)不同的屬性值,實(shí)現(xiàn)不同的2D轉(zhuǎn)換荷愕。
注意衡怀! transform是一個獨(dú)立的屬性,并不需要搭配transition才能生效安疗。我只是為了例子更加直觀所以才一起寫的抛杨,不要被誤導(dǎo)哦~
位移 translate()
- 概述:對元素進(jìn)行水平&垂直方向上的移動。
- 書寫語法:
屬性值 | 說明 |
---|---|
translate(x,y) | x,y分別是水平和垂直方向的距離荐类,可以為px也可以為% |
translate(x) | 只有一個數(shù)值怖现,表示水平方向的位移 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
transition: all 0.5s linear 0s;
}
div:hover{
/* 位移屬性 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
說明:利用偽類選擇器hover,實(shí)現(xiàn)鼠標(biāo)移動至盒子上方時,盒子向右向下各位移100像素屈嗤。
縮放 scale()
- 概述:在元素的寬高兩個維度對元素進(jìn)行縮放潘拨。
- 書寫語法:
屬性值 | 說明 |
---|---|
scale(x,y) | x,y分別是改變寬度和高度的倍數(shù) |
scale(n) | 只有一個數(shù)值,表示寬高同時縮放n倍 |
scaleX(n) | 改變元素的寬度 |
scaleY(n) | 改變元素的高度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
transition: all 0.5s linear 0s;
}
div:hover{
/* 縮放 */
transform: scale(0.5,1.5);
}
</style>
</head>
<body>
<br>
<br>
<br>
<div></div>
</body>
</html>
說明:如圖所示饶号,縮放盒子的寬度為50%铁追,縮放盒子的高度為150%。
旋轉(zhuǎn) rotate()
- 概述:在元素的寬高兩個維度對元素進(jìn)行縮放茫船。
-
書寫語法:transform: rotate(數(shù)字deg)
- 說明:deg為度數(shù)單位琅束,正數(shù)為順時針旋轉(zhuǎn),負(fù)數(shù)為逆時針旋轉(zhuǎn)算谈。
- 注意:元素旋轉(zhuǎn)后坐標(biāo)軸也會發(fā)生變化涩禀!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
position: relative;
left: 50px;
top: 50px;
transition: all 0.5s linear 0s;
}
.box2{
background-color: pink;
}
.box2:hover{
transform: rotate(45deg) translate(100px);
}
.box1{
background-color: red;
}
.box1:hover{
transform: translate(100px) rotate(45deg) ;
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
說明:因?yàn)樾D(zhuǎn)后,元素的坐標(biāo)軸也會跟著旋轉(zhuǎn)然眼,所以旋轉(zhuǎn)后的位移會以新的坐標(biāo)軸為基準(zhǔn)進(jìn)行旋轉(zhuǎn)艾船,就導(dǎo)致了粉色盒子的情況。而同比紅色的盒子高每,是先位移后旋轉(zhuǎn)屿岂,位移時坐標(biāo)軸沒有受到影響,所以符合我們的預(yù)期觉义。
傾斜 skew()
- 概述:在元素的水平方向和垂直方向上進(jìn)行2D傾斜。
- 書寫語法:transform: skew(數(shù)字deg,數(shù)字deg);
- 注意:兩個屬性值分別表示水平和垂直方向傾斜的角度浴井,屬性值可以為正可以為負(fù)晒骇,第二個數(shù)值不寫默認(rèn)為0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 100px;
background-color: pink;
transition: all 0.5s linear 0s;
position: relative;
top: 50px;
left: 50px;
}
div:hover{
transform: skew(30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
說明:此處以“在水平方向的傾斜”為例磺浙,注意洪囤,雖然傾斜了,但是坐標(biāo)軸并沒有發(fā)生變化撕氧。
transform-origin屬性
- 概述:調(diào)整元素的水平和垂直方向基準(zhǔn)點(diǎn)的位置瘤缩。
- 作用:主要用于旋轉(zhuǎn),旋轉(zhuǎn)是以元素的基準(zhǔn)點(diǎn)進(jìn)行變換的伦泥,基準(zhǔn)點(diǎn)的位置不同剥啤,旋轉(zhuǎn)的效果也不同。
- 書寫方式:transform-origin: 水平方向 垂直方向;
-
屬性值:
- 水平方向:可以使用關(guān)鍵字left不脯、center府怯、right以及像素值和百分比。
- 垂直方向:可以使用關(guān)鍵字top防楷、center牺丙、bottom以及像素值和百分比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 100px;
position: relative;
transition: all 0.5s linear 0s;
margin: 50px auto;
}
.box1{
background-color: pink;
transform-origin: center center;
}
.box1:hover{
transform: rotate(45deg);
}
.box2{
background-color: red;
transform-origin: left top;
margin: 0px auto;
}
.box2:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
說明:粉色盒子的基準(zhǔn)點(diǎn)是盒子的正中心,所以旋轉(zhuǎn)起來是以中心為基準(zhǔn)順時針旋轉(zhuǎn)45°冲簿;而紅色盒子的基準(zhǔn)點(diǎn)是左上頂點(diǎn)粟判,所以旋轉(zhuǎn)起來是以左上頂點(diǎn)為中心順時針旋轉(zhuǎn)45°,兩者效果因基準(zhǔn)點(diǎn)位置不同而大相徑庭峦剔。
前端文章匯總目錄
http://www.reibang.com/p/6d80dd616ff4
結(jié)束語:一花一世界档礁,一木一浮生,愿與諸君共勉