css基礎(chǔ)知識(shí)
變形:
/*位移*/
transform: translate(50px,50px);
/*沿Z軸旋轉(zhuǎn)360度*/
transform: rotate(360deg);deg是度的意思
/*縮放*/
transform: scale(0.5,0.2);x和y軸縮放比例
/*斜切*/\
transfrom:skew(0,45deg)x,y軸縮放的角度
元素旋轉(zhuǎn)
旋轉(zhuǎn)方向的判斷;
1容客、X軸向右婚苹、Y軸向下、Z軸向屏幕外
2脾猛、讓軸向?qū)χ约海槙r(shí)針?lè)较蚓褪窃撦S向的旋轉(zhuǎn)方向*/
/*設(shè)置盒子按3D空間顯示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
默認(rèn)從z軸旋轉(zhuǎn)
transform: rotate(45deg);
變形中心點(diǎn):
語(yǔ)法:transform-origin
默認(rèn)值是盒子中心點(diǎn),
還可以設(shè)置方位例如:transform-origin: left center;
還可以設(shè)置例如九宮格的方式:transform-origin: left top;
還可以自己定義位置:transform-origin: 50px 50px;
背面可見(jiàn)
背面是否可見(jiàn):backface-visibility: hidden;
圖片翻轉(zhuǎn)：
演示圖片和文字層重疊的效果
transform-style: preserve-3d;
transform: perspective(800px) rotateY(45deg);初始旋轉(zhuǎn)45度
animation動(dòng)畫(huà)：
語(yǔ)法：animation
屬性：nfinite不限制次數(shù)
alternate動(dòng)畫(huà)結(jié)束后返回塘砸，返回也算次數(shù)
animation-fill-mode 動(dòng)畫(huà)前后的狀態(tài)
forwards動(dòng)畫(huà)完成保持在最后一幀
backwards在延遲時(shí)間內(nèi)足淆，在動(dòng)畫(huà)顯示之前，應(yīng)用from開(kāi)始屬性值（例如box寬100丧裁，from寬200护桦，在延遲1s內(nèi)顯示200）
both向前和向后填充模式都被應(yīng)用（例如起始按200，結(jié)束停在最后一幀）
例子：animation: moving 1s ease 1s 5 alternate both;
動(dòng)畫(huà)暫停：animation-play-state: paused
動(dòng)畫(huà)運(yùn)行：animation-play-state: runnin
定義動(dòng)畫(huà)名稱(chēng)及形式框架代碼：
/*定義一個(gè)動(dòng)畫(huà)煎娇，名稱(chēng)為moving*/
@keyframes moving{
/*初始狀態(tài)*/
from{
width: 200px;
}
/*結(jié)束狀態(tài)*/
to{
width: 500px;
}
animation:name duration timing-function delay iteration-count direction;同時(shí)設(shè)置多個(gè)屬性
舉例(人物走動(dòng))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人物走路動(dòng)畫(huà)</title>
<style type="text/css">
.box{
width: 120px;
height: 182px;
/*border: 1px solid black;*/
margin: 50px auto 0;
overflow: hidden;
position: relative;
animation: moving 2s linear infinite;
}
.box img{
position: absolute;
left: 0;
top: 0;
/*steps動(dòng)畫(huà)步數(shù)二庵，圖片有8幀，所以設(shè)置為8步*/
animation: walking 2s steps(16) infinite;
}
@keyframes moving{
0%{
transform: translate(0px,0px);/*位移*/
}
50%{
transform: translate(200px,0px);
}
100%{
transform: translate(0px,0px);
}
}
@keyframes walking{
from{
left: 0px;
}
to{
left: -1920px;
}
}
</style>
</head>
<body>
<div class="box">
<img src="img/walking1.png" alt="人物走路">
</div>
</body>
</html>
css游覽器樣式前綴
為了讓CSS3樣式兼容缓呛，需要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如(以下代碼可以兼容所有游覽器)
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
