H5C3動畫

1 漸變 

        /* 漸變：不同顏色之間的柔和過渡
            線性漸變：沿着某條直線發生漸變效果
            注意：漸變准備來說是一張背景圖
            語法：linear-gradient
         */
 background-image: linear-gradient(0deg,red,green,blue,yellow,pink);
參數一 是漸變的角度
 
2 背景圖片
  background: #fff url(images/1.jpg) 0 0 no-repeat;
            取值：
                像素
                百分比 參照的是當前的盒子大小
                contain 保證等比例縮放 但是會有留白問題
                cover 保證等比例縮放 但是會有多余的溢出
            */
            /* background-size: cover; */
            /* background-size: contain; */
            /* background-size: 100% 100%; */
 
                background-clip 控制背景圖片的顯示區域
                border-box : padding + border + content;
                padding-box : padding + content;
                content-box: content;
 
            /* 設置背景圖片從什么地方開始顯示
                取值：
                padding-box 從padding的區域開始平鋪
                border-box 從border的區域開始平鋪
                content-box 從內容的區域開始平鋪
             */
            background-clip:content-box;
 
3 過度 
 transition:
                過渡的屬性: 什么屬性需要過渡就寫什么屬性 特殊值 all;            
                過渡的動畫效果是由瀏覽器完成的 效率比JQ的定時器要高的多
                在手機端的動畫都推薦使用css3
　　　　　結合hover使用
 
4 2D轉換  （結合hover和過度時間transition使用效果更好）
 
/* scale
                控制元素的縮放 縮放沒有單位 直接寫數值即可       transform: scale(1.3);
　　　　　結合hover使用
                scaleX 水平縮放
                scaleY 水平縮放
                scale 整體縮放
 
  rotate  /* 旋轉：單位是deg 正值 順時針 負值 逆時針 */       
            transform: rotate(-45deg);
　　　transform-origin: -200px -200px; 旋轉點

  translate 元素的移動
            translateX  X軸移動
            translateY  Y軸移動
            translate(x,y)   三角形的第三條邊移動
            取值可以是像素 也可以是百分比 百分比參照的是這個盒子本身的寬高
            transform: translate(100px, 100px);

5 3D轉換 6 自定義無限循環動畫 上面說的都是結合hover的一次性動畫，如何使動畫持續呢？H5C3中有一個自定義動畫 如何使用呢？ 首先要自定義一個動畫 讓它如何動，如下是一個簡單的自定義動畫，可以做的更復雜，這里就不做了。 @keyframes imgMove { from { transform: translateX(0px); } to { transform: translateX(882px); } } 其次需要在需要這個動畫的盒子家加上這個動畫,用animation屬性 imgMove 為動畫的名稱，5s為一個動畫執行的時間，linear運動的方式，infinite為永久性動畫。 .box { height: 300px; width: 300px; border: 1px solid #ccc; transition: all 2s; animation: imgMove 5s linear infinite }