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