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 }