前端【特效】

变形

      平移 

      transform: translateY(100px); 

         旋转 deg turn grad 

        transform: rotate(90deg); 

        transform: rotateX(90deg); 

            缩放 

            transform: scaleX(2); 

            transform: scale(.25); 

            倾斜 

            transform: skewX(60deg);

过渡 transition

过渡模仿iphone解锁

    
    
    
    
    
   


    
千山鸟飞绝

过滤

 模糊 

          filter: blur(10px); 

            亮度 

         filter：brightness(2) 

            对比度 

            filter: contrast(2); 

          阴影 

             filter: drop-shadow(5px 5px 5px tomato); 

           灰度 

           filter: grayscale(1);

            色相转变 

         filter: hue-rotate(360deg); 

            反转 

          filter: invert(1); 

          透明度 

             filter: opacity(.25); 

          饱和度

             filter: saturate(4.25); 

           褐色 

           filter: sepia(.5); 

渐变

linear-gradlient、radial-gradlient

        背景图：渐变（方向，颜色1百分比，颜色2百分比

谷歌：-webkit-

设置方向left=to right

            left top

 box-shadow、text-shadow

        阴影：横向偏移量 纵向偏移量 模糊距离 阴影颜色