1、animation （動(dòng)畫）
屬性
設(shè)置動(dòng)畫名稱
animation-name：change矾柜；設(shè)置動(dòng)畫時(shí)間
animation-duration：2s阱驾；設(shè)置動(dòng)畫次數(shù)
animation-iteration-count：3；
其中有個(gè)屬性為infinite意思為無限循環(huán)設(shè)置動(dòng)畫延遲
animation-delay：3s怪蔑；設(shè)置動(dòng)畫的方向與是否返程里覆，值有：normal、reverse饮睬、alternate租谈、alternate-reverse
animation-direction：alternate；速度
animation-timing-function：linear；
linear為勻速割去，還有ease-in設(shè)置動(dòng)畫結(jié)束的時(shí)候應(yīng)用最后一幀的屬性值:forwards;設(shè)置動(dòng)畫在延遲中應(yīng)用第一幀的屬性值（backwards）窟却；如果兩個(gè)效果都需要，則使用（both）
animation-fill-mode：both呻逆；-
設(shè)置動(dòng)畫暫停（paused）與播放（running）
animation-play-state：running夸赫；實(shí)例
<style>
@keyframes anitname{
0%{
left:0;
}
50%{
left:100px;
}
100%{
left:0;
}
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 0;
animation: anitname 3s infinite;
}
</style>
如何引入animate.css庫
- 進(jìn)入github中搜索庫名下載
- 然后將庫引入
<link rel="stylesheet" href="animate.css" >
- 在標(biāo)簽中直接應(yīng)用
<p class="animated rubberBand">測試文字</p>
2.column 多列布局
- column-count 設(shè)置幾列布局
column-count：3； - column-width：設(shè)置列寬
column-width：5em咖城； - columns 符合形式優(yōu)先使用較少列數(shù)的設(shè)置項(xiàng)
column：2 20em茬腿； - column-gap 設(shè)置列之間的間隙
column-gap：3em；
考慮兼容性
-webkit-column-gap: 3em;谷歌兼容
-moz-column-gap: 3em;火狐兼容
-ms-column-gap: 3em;IE兼容
- 設(shè)置列之間的間隙樣式
column-rule-color：blue宜雀；
column-rule-width：1px切平；
column-rule-style：dashed；
- 符合樣式
column-rule: 1px solid red;
- 指定元素跨越所有的列
column-span: all;
3.border-radius
- border-radius可以輕松的給元素設(shè)置圓角效果
border-radius: 50%;
- border-radius的值做多可以寫8個(gè)值辐董，分別代表：上左悴品、上右、下右简烘、下左 / 左上 右上 右下 左下
注意寫8個(gè)值的時(shí)候苔严，前4個(gè)值和后4個(gè)值之間要用 / 分隔
通常寫4個(gè)值就夠了，也可以寫1個(gè)或者2個(gè)孤澎。
4.box-shadow 盒子陰影
盒子設(shè)置陰影
四個(gè)值：第一個(gè)：X軸的偏移：第二個(gè)：Y軸的偏移届氢；第三個(gè)：陰影的模糊程度；第四個(gè)：顏色
box-shadow: 10px 10px 10px blue;
- inset可以設(shè)置內(nèi)陰影
box-shadow: inset 10px 10px 10px blue;
- 陰影值可以寫多個(gè)覆旭，直接寫在一起退子，中間用逗號(hào)分隔
text-shadow: 10px 10px 10px red,0 0 20px blue;
