1.動(dòng)畫
動(dòng)畫的使用必須要準(zhǔn)備：
1.準(zhǔn)備動(dòng)畫 @keyframes 關(guān)鍵字定義
2.需要為想要使用動(dòng)畫的dom元素 添加一系列的動(dòng)畫屬性
/* 1.定義動(dòng)畫 */
@keyframes toright{
from{
/* from中如果不設(shè)置 默認(rèn)使用的是 初始狀態(tài) */
}
to{
transform: translateX(800px);
}
}
# 也可以使用百分?jǐn)?shù)設(shè)置 #
@keyframes stepAnimation{
/* 起始狀態(tài) */
0%{
}
/* 動(dòng)畫的一半 移動(dòng)到屏幕的 最右邊 */
50%{
transform: translateX(1000px);
}
/* 返回到起始的位置 */
100%{
transform: translateX(0);
}
}
-----------------------------------------------------------------------
//準(zhǔn)備一個(gè)class 內(nèi)部定義了動(dòng)畫的各種效果
.animation{
/* 動(dòng)畫的名字 */
animation-name: toright;
/* 動(dòng)畫持續(xù)多久 */
animation-duration: 2s;
/* 設(shè)置動(dòng)畫的次數(shù)
動(dòng)畫次數(shù)
可以給具體的值
infinite 無(wú)限
*/
animation-iteration-count: infinite;
/* 動(dòng)畫的速度 線型 */
animation-timing-function: linear;
/* 動(dòng)畫的延遲事件 */
animation-delay: 2s;
/* animation-direction 屬性定義是否應(yīng)該輪流反向播放動(dòng)畫 */
animation-direction alternate；// 屬性定義是否應(yīng)該輪流反向播放動(dòng)畫
}
=======================================================
/* 鼠標(biāo)懸停的時(shí)候 停止動(dòng)畫 */
.container:hover{
/* 動(dòng)畫狀態(tài)
如果要使用js操作該屬性
dom.style.animationPlayState ='paused'
*/
/* animation-play-state: paused; */
animation: haha ;
}
動(dòng)畫的復(fù)合寫法：
animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱贤重。荠卷。
animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間郭脂，以秒或毫秒計(jì)鸠窗。
animation-timing-function | 規(guī)定動(dòng)畫的速度曲線尺借。
animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲装哆。
animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫旗国。
注意：
- 屬性的順序 是可以隨意調(diào)換的
- 第一次出現(xiàn)的時(shí)間 是持續(xù)時(shí)間
- 第二次出現(xiàn)的時(shí)間 是延遲時(shí)間
- 如果只寫了一個(gè)時(shí)間 默認(rèn)就是 持續(xù)時(shí)間
2.彈性布局
1.使用彈性布局需要在父盒子中開啟彈性布局
彈性布局 開啟以后 元素默認(rèn)分為兩個(gè)軸排布
- 主軸 默認(rèn)是 X方向 - 副軸 默認(rèn)是 Y軸方向 display: flex;
設(shè)置主軸副軸：
/* 調(diào)整元素 在主軸上的 排布方式
flex-end 到主軸的末尾
flex-start 默認(rèn)值
center 居中
space-between 左右靠邊,中間間隙 相等排布
space-around 左右 間隙相等
*/
justify-content: space-around;
--------------------------------------------------
/* 設(shè)置副軸的 對(duì)其方式
如果 只有一行 設(shè)置 元素 在副軸上的對(duì)其方式
flex-start
flex-end
center
*/
align-items: flex-end;
}
--------------------------------------------------
/* 單獨(dú)設(shè)置元素 在副軸上的對(duì)其方式 會(huì)覆蓋父元素的 align-items */
可設(shè)置：
flex-start | flex-end | center枯怖；
align-self: center;
調(diào)整主軸方向：
flex-direction: column;
注意：
/* 設(shè)置主軸的排布 哪怕方向改變 */
justify-content: flex-end;
/* 設(shè)置副軸的排布 方向改變之后 依舊是設(shè)置副軸 */
align-items: center;
換行
/* 開啟彈性布局的換行 */
### flex-wrap: wrap; ###
/* 變?yōu)槎嘈辛?無(wú)法使用 align-items 進(jìn)行位置設(shè)置
align-content 在多行的時(shí)候 設(shè)置屬性 跟 justify-content 一模一樣
如果只有 一行時(shí) 無(wú)法生效
*/
align-content: flex-end;