CSS過(guò)渡動(dòng)畫(huà):
transition:width 3s ease,height 3s ease 1s芦瘾,background-color 3s ease 2s; 寬先變,用時(shí)3s,高1s后變,顏色2s后變
圓角:
border-radius:1s ease 3s;
transition:all 3s ease;一起變
運(yùn)動(dòng)曲線:
div:nth-child(1) 第一個(gè)div
box-shadow:左右,垂直,陰影清楚與否,陰影大小
insert 內(nèi)陰影
transition:all 1s linear:勻速
transition:all ls ease; 中間快
transition:all 1s ease-in;越來(lái)快簸州,突然停
transition:all 1s ease-out;越來(lái)慢,慢慢停
transition:all 1s ease-in-out;同ease
貝塞爾曲線:回彈
display:none;默認(rèn)隱藏
display:block;出現(xiàn)
變形:
transform:translate(30px,20px); 水平歧譬,垂直位移 不影響別的
旋轉(zhuǎn):
transform:rotate(30deg) 轉(zhuǎn)30度
transform:scale(0.5,3) 縮放
transform:skew(30deg,0) 水平斜切45度,垂直不變
transform-style:preserve-3d;
默認(rèn)Z軸旋轉(zhuǎn)
transform:perspective(800px) rotateX(45deg) X軸旋轉(zhuǎn)
變形中心點(diǎn):
transition-origin:left center; 沿著左邊中心點(diǎn)轉(zhuǎn)
transition-origin:left top; 左上角
transition-origin:50px 50px;
transition:all 1s ease;
transform:rotate(90deg);
背面可見(jiàn):(默認(rèn))
transition:all 1s ease;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
transform-visibility:hidden; 背面不可見(jiàn)
transition:rotateY(180deg); 翻轉(zhuǎn)
position:relative; 相對(duì)定位 父類(lèi)定義搏存,相對(duì)body
position:absolute; 絕對(duì)定位 相對(duì)父類(lèi)
text-align:center; 文字居中
animation動(dòng)畫(huà):
animation:moving 1s ease 1s 5(infinite) alternate forwards; 一次1s,5次(不限次),原路返回 瑰步,停后不跳回
animation-play-state:paused; 鼠標(biāo)移入暫停
running; 移入開(kāi)動(dòng)
@keyframes moving{
from{
width:100px;
}
to{
width:50px;
}
}
border-radius:50px; 圓