一.過渡
transition:過渡屬性1 執(zhí)行時(shí)間? 延遲時(shí)間? 變化曲線,屬性2同上
注意 :過渡只適用屬性值可以數(shù)字化的 比如display就不能過渡.
二.動畫 (關(guān)鍵幀)
1.定義動畫
@keyframes 動畫名{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
0%{ 初始狀態(tài)}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
100%{結(jié)束狀態(tài)}? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ?
2.調(diào)用執(zhí)行動畫
animation:動畫名? 執(zhí)行時(shí)間 延遲時(shí)間? 執(zhí)行次數(shù)(infinite)? 變化曲線(linear) 方向(alternate)
3.暫停
animation-play-state:paused暫停 |? running執(zhí)行
三.背景圖大小 漸變
background-size:寬度 高度
漸變? line-gradient
線性漸變
1.基礎(chǔ)漸變
background:linear-gradient(顏色1,顏色2)
2.設(shè)置漸變的方向
background:linear-gradient(to方向,顏色1,顏色2)
3.設(shè)置漸變的比例
background:linear-gradient(顏色1*%,顏色2*%)
4.對角漸變
background-linear-gradient(to 方向1 2,顏色1,顏色2)
5.設(shè)置對角角度
background:linear-gradient(*deg,顏色1,顏色2)
徑向漸變
1.基礎(chǔ)漸變
background:radial-gradient(顏色1,顏色2)
2.漸變比例
background:radia(顏色1 *%,顏色2 *%)
3.設(shè)置漸變圖案
background:radial-gradient:(circle | ellipse,顏色1%)
重復(fù)漸變
重復(fù)線性漸變
background:repeating-linear-gradient(顏色1 *%,顏色2 *%)
重復(fù)徑向漸變
background:repeating-radial-gradient(顏色1 *%,顏色2 *%)
四.彈性盒子
概念:一種新的布局方式? 主要是讓元素有能力控制子元素的排列方式 常用于手機(jī)端
容器身上的屬性
1.設(shè)置為容器
容器上的屬性
display:flex |ine-flex; flex是彈性盒子? line-flex是行內(nèi)彈性盒子 寬高由內(nèi)容撐大
2.設(shè)置主軸的排列方向
flex-direction:column列? |rol行
3.設(shè)置主軸的排列方式
justify-content:flex-start | flex-end |center? space-between |space-around |space-evenly
4.設(shè)置在側(cè)軸的排列方式
align-items:center? flex-start | flex-end
5.是否換行
flex-wrap:wrap |nowrap
6.多根軸排列方式
align-content:justify-content:flex-start | flex-end |center? space-between |space-around |space-evenly
注意 單根軸無效
7.復(fù)合屬性
flex-flow:方向 是否換行
8.項(xiàng)目身上的屬性
項(xiàng)目的排序
order:數(shù)字? ?默認(rèn)為0? 排序從小到大? 可正可負(fù)
項(xiàng)目縮小
flex-shrink:數(shù)字?
默認(rèn)為1 縮小? 0為不縮小
項(xiàng)目擴(kuò)大
flex-grow:數(shù)字
默認(rèn)為0 不擴(kuò)大? 1要放大
項(xiàng)目的復(fù)合屬性
flex:1;
代表 擴(kuò)大? 縮小 auto(basis 基本尺寸)
項(xiàng)目的單獨(dú)的排列方式
align-self:center |flex-start |flex-end;
