1、animation （動畫）

屬性

• 設置動畫名稱
  animation-name：change；

• 設置動畫時間
  animation-duration：2s；

• 設置動畫次數
  animation-iteration-count：3；
  其中有個屬性為infinite意思為無限循環

• 設置動畫延遲
  animation-delay：3s；

• 設置動畫的方向與是否返程，值有：normal、reverse、alternate、alternate-reverse
  animation-direction：alternate；

• 速度
  animation-timing-function：linear；
  linear為勻速，還有ease-in

• 設置動畫結束的時候應用最后一幀的屬性值:forwards;設置動畫在延遲中應用第一幀的屬性值（backwards）；如果兩個效果都需要，則使用（both）
  animation-fill-mode：both；

• 設置動畫暫停（paused）與播放（running）
  animation-play-state：running；

  實例

<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庫

• 進入github中搜索庫名下載
• 然后將庫引入

<link rel="stylesheet" href="animate.css" >

• 在標簽中直接應用

<p class="animated rubberBand">測試文字</p>

2.column 多列布局

• column-count 設置幾列布局
  column-count：3；
• column-width：設置列寬
  column-width：5em；
• columns 符合形式優先使用較少列數的設置項
  column：2 20em；
• column-gap 設置列之間的間隙
  column-gap：3em；

考慮兼容性

-webkit-column-gap: 3em;谷歌兼容
-moz-column-gap: 3em;火狐兼容
-ms-column-gap: 3em;IE兼容

• 設置列之間的間隙樣式

    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可以輕松的給元素設置圓角效果

border-radius: 50%;

• border-radius的值做多可以寫8個值，分別代表：上左、上右、下右、下左 / 左上 右上 右下 左下

注意寫8個值的時候，前4個值和后4個值之間要用 / 分隔
通常寫4個值就夠了，也可以寫1個或者2個。

4.box-shadow 盒子陰影

• 盒子設置陰影

• 四個值：第一個：X軸的偏移：第二個：Y軸的偏移；第三個：陰影的模糊程度；第四個：顏色

box-shadow: 10px 10px 10px blue;

• inset可以設置內陰影

box-shadow: inset 10px 10px 10px blue;

• 陰影值可以寫多個，直接寫在一起，中間用逗號分隔

text-shadow: 10px 10px 10px red,0 0 20px blue;