過度與動畫

1,過渡三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性需要執行過渡效果 1.3必須告訴系統過渡效果持續時長 2.注意點當多個屬性需要同時執行過渡效果時用逗號隔開即可 transition-property: width, background-color; transition-duration: 5s, 5s;

1.過渡連寫格式 transition: 過渡屬性過渡時長運動速度延遲時間; 2.過渡連寫注意點 2.1和分開寫一樣, 如果想給多個屬性新增過渡效果也是用逗號隔開即可 2.2連寫的時可以省略後面的兩個引數, 因為只要編寫了前面的兩個引數就已經滿足了過渡的三要素 transition:all 0s;

1.編寫過渡套路 1.1不要管過渡, 先編寫基本介面 1.2修改我們認為需要修改的屬性 1.3再回過頭去給被修改屬性的那個元素新增過渡即可

2d轉化模組

/*其中deg是單位, 代表多少度*/
transform: rotate(45deg);

/*
第乙個引數:水平方向
第二個引數:垂直方向
*/transform: translate(100px, 0px);

/* 第乙個引數:水平方向第二個引數:垂直方向注意點: 如果取值是1, 代表不變如果取值大於1, 代表需要放大如果取值小於1, 代表需要縮小如果水平和垂直縮放都一樣, 那麼可以簡寫為乙個引數 *//*transform: scale(0.5, 0.5);*/

/*
注意點:
1.如果需要進行多個轉換, 那麼用空格隔開
2.2d的轉換模組會修改元素的座標系, 所以旋轉之後再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

預設情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點

1.什麼是透視近大遠小 2.注意點一定要注意, 透視屬性必須新增到需要呈現近大遠小效果的元素的父元素上面

*預設情況下所有元素都是圍繞z軸進行旋轉*/
transform: rotatez(45deg);

/*
總結:想圍繞哪個軸旋轉, 那麼只需要在rotate後面加上哪個軸即可
*/transform: rotatey(45deg);

盒子陰影和文字陰影

1.如何給盒子新增陰影 box-shadow: 水平偏移垂直偏移模糊度陰影擴充套件陰影顏色內**影; 2.注意點 2.1盒子的陰影分為內**影, 預設情況下就是**影 2.2快速新增陰影只需要編寫三個引數即可 box-shadow: 水平偏移垂直偏移模糊度; 預設情況下陰影的顏色和盒子內容的顏色一致 3.如何給文字新增陰影 text-shadow: 水平偏移垂直偏移模糊度陰影顏色 ;

動畫模組

/*1.告訴系統需要執行哪個動畫*/ animation-name: lnj; /*3.告訴系統動畫持續的時長*/ animation-duration: 3s; }/*2.告訴系統我們需要自己建立乙個名稱叫做lnj的動畫*/ @keyframes lnj to} /*告訴系統多少秒之後開始執行動畫*/ /*animation-delay: 2s;*/ /*告訴系統動畫執行的速度*/ animation-timing-function: linear; /*告訴系統動畫需要執行幾次*/ animation-iteration-count: 3; /*告訴系統是否需要執行往返動畫取值:normal, 預設的取值, 執行完一次之後回到起點繼續執行下一次 alternate, 往返動畫, 執行完一次之後往回執行下一次 */animation-direction: alternate; div:hover 通過我們的觀察, 動畫是有一定的狀態的 1.等待狀態 2.執行狀態 3.結束狀態 *//* animation-fill-mode作用: 指定動畫等待狀態和結束狀態的樣式取值:none: 不做任何改變 forwards: 讓元素結束狀態保持動畫最後一幀的樣式 backwards: 讓元素等待狀態的時候顯示動畫第一幀的樣式 both: 讓元素等待狀態顯示動畫第一幀的樣式, 讓元素結束狀態保持動畫最後一幀的樣式 *//*animation-fill-mode: backwards;*/ /*animation-fill-mode: forwards;*/ animation-fill-mode: both;

1.過渡和動畫之間的異同 1.1不同點過渡必須人為的觸發才會執行動畫動畫不需要人為的觸發就可以執行動畫 1.2相同點過渡和動畫都是用來給元素新增動畫的過渡和動畫都是系統新增的一些屬性過渡和動畫都需要滿足三要素才會有動畫效果

1.動畫模組連寫格式 animation:動畫名稱動畫時長動畫運動速度延遲時間執行次數往返動畫; 2.動畫模組連寫格式的簡寫 animation:動畫名稱動畫時長;

3d模組

1.什麼是2d和3d 2d就是乙個平面, 只有寬度和高度, 沒有厚度 3d就是乙個立體, 有寬度和高度, 還有厚度預設情況下所有的元素都是呈2d展現的 2.如何讓某個元素呈3d展現和透視一樣, 想看到某個元素的3d效果, 只需要給他的父元素新增乙個transform-style屬性, 然後設定為preserve-3d即可

想看到整個立方的近大遠小效果, 就給ul的父元素新增透視

/* 注意點: 只要父元素被拉伸了,子元素也會被拉伸

*/

注意點: 1.動畫中如果有和預設樣式中同名的屬性, 會覆蓋預設樣式中同名的屬性 2.在編寫動畫的時候, 固定不變的值寫在前面, 需要變化的值寫在後面

背景尺寸屬性

背景尺寸屬性是css3中新增的乙個屬性, 專門用於設定背景大小

/* 第乙個引數:寬度第二個引數:高度 */background-size:200px 100px;

/* cover含義: 1.告訴系統需要等比拉伸 2.告訴系統需要拉伸到寬度和高度都填滿元素 */background-size:cover;

背景定位區域屬性

/* 告訴系統背景從什麼區域開始顯示, 預設情況下就是從padding區域開始顯示 */background-origin: padding-box;

背景繪製區域屬性

背景繪製區域屬性是專門用於指定從哪個區域開始繪製背景的, 預設情況下會從border區域開始繪製背景 background-clip: padding-box;

多重背景

多張背景之間用逗號隔開即可注意點: 先新增的背景會蓋住後新增的背景建議在編寫多重背景時拆開編寫

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom;

過度與動畫

過度與動畫

過度及動畫

css中的基本簡單動畫與過度效果

過度與動畫

過度與動畫

過度及動畫

css中的基本簡單動畫與過度效果

相關推薦