CSS特效

CSS强大的特效：

    一、边框：
       1、 box-shadow:10px 10px 10px 10px red
                   水平  垂直 模糊  延长  颜色
        示例：

      <div style="box-shadow:10px 10px 10px 10px red;height: 70px;width: 100px;border: 1px solid red;">
        测试数据
       </div>

      
       2、border-radius：10px;圆角

 

       3、border-image:url("");
       4、border-color:边框颜色

    二、背景：
        1、background-origin: border-box/padding-box/content-box
                      定位  ：从border开始显示背景/从padding开始显示背景/从content开始显示背景

        2、background-clip: border-box/padding-box/content-box
               背景绘制区域：从border开始绘制/从padding开始绘制/从content开始绘制

        3、background-size:100px 100px(背景大小值 宽 高)

        4、多重背景设置：

                       background-imagge:url(""),url(""),url("");
                       backgoudnd-size:100px 100px,200px 200px,300px 300px;
                       background-position:0 0,100px 100px,200px 200px;

        5、背景线性渐变：backgound:_webkit_gradient(linear,   0    0,   0   100px);
                                                  线性渐变，开始X Y轴，结束X Y轴

   三、文本：         
        1、文本阴影：text-shadow:1px 1px 1px red;
                              水平方向偏移，垂直方向偏移，模糊程度，阴影颜色

        2、文本溢出：text-overflow:clip（与overflow配合使用）/ellipsis(与overflow配合使用超出部分用。。。表示)

           示例：
    <p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 90px;height: 50px;">
              （一行显示，不换行）；超出部分剪切掉；超出部分用。。。表示
        测试数据测试数据测试数据测试数据测试数据测试数据
    </p>
    <p>测试数据</p>
    <p>测试数据</p>

        3、连续文本换行：word-wrap:break-word（超过宽度后自动换行）

2D/3D转换
    一、2D转换：

       第1步：设置对象变换时的过渡

          transition-property: all;（全部属性参与过渡）
          transition-duration: 2s;（过渡时间）
          transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
                                     (线性过渡)
          transition-delay: 2s;（延迟时间）

          -webkit-transition: all 2s linear 2s;

       第2步：设置类型转换

            -webkit-transform-origin: 10px 0;（定义转换时发生的参照点，默认为中心点）
            -webkit-transform: translate(500px ,500px);
           translate()表移动，rotate(deg)表旋转，scale(1,1)表缩放，skew(deg)表斜切，matrix()表组合操作
         
         示例：   

        .inner{

            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 2s;
            -webkit-transition: all 2s linear 2s;
            -moz-transition: all 2s linear 2s;
        }

        .outer :hover.inner{
            -webkit-transform-origin: 10px 0;
            -webkit-transform: translate(500px ,500px);
        }  
  
    二、3D转换：
        rotateX()
        rotateY()

   三、动画设置：
          第1步：设置对象变换时的过渡

          animation-name: test;（动画的名称）
          animation-duration: 2s;（过渡时间）
          animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
                                     (线性过渡)
          animation-iteration-count:3(动画播放的次数)
          animation-direction:alternate(反向运动)

          -webkit-transition: test 2s linear 3 alternate;

       第2步：设置类型转换

            -webkit-transform-origin: 10px 0;（定义转换时发生的参照点，默认为中心点）
            -webkit-transform: translate(500px ,500px);
            translate()表移动，rotate()表旋转，scale()表缩放，skew()表斜切，matrix()表组合操作
         
         示例：   

        .inner{

          animation-name: test;（动画的名称）
          animation-duration: 2s;
          animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
                                     (线性过渡)
          animation-iteration-count:3(动画播放的次数)
          animation-direction:alternate(反向运动)
          animation-inifite:infinite(循环)

            -moz-animation: test 2s linear 3;
        }

        @-keyframes text(动画名){
            from{ ... } 
            to{ -webkit-transform: translate(500px ,500px); }
        }  

        @-keyframes text(动画名){
            0%{ transform:rotate(60deg) } 
            50%{ transform:rotate(0deg)}
            100%{ transform:rotate(0deg)}
        }