HTML及CSS复习2 关于动画

1.filter属性

定义了元素(通常是)的可视效果(例如：模糊与饱和度)

filter: none | blur() | brightness() | contrast() | drop-shadow()
 | grayscale() | hue-rotate() | invert() | opacity() | saturate() 
 | sepia() | url();

 提示: 使用空格分隔多个滤镜。

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

详情见：CSS3 filter(滤镜) 属性 | 菜鸟教程

2.过渡

能够过度很多属性，但不能过渡没有中间过渡值的属性，比如display;

//transition:(过渡什么属性)(过渡时间)(运动速度)(等待多久);
transition : width 3s linear(匀速) 1s; /*前两个必须写*/
transition : all 3s; /*所有属性一起执行*/
opacity:0;/*透明0 ~ 1*/

谁过渡给谁加，如果放入 hover 伪元素中鼠标离开就不会执行过渡

3.2D转换 （transform）

 (1)2D移动，可改变元素在页面中的位置，类似定位。

   transform : translate(x,y) ;
   transform : translateX(100px); 
   transform : translateY(100px);

  重点：

           ①定义2D转换中的移动，沿着X和Y轴移动元素；
           ②translate最大的优点是不会影响其他元素位置;
           ③translate中的百分比单位相对于自身元素的translate:(50%,50%); /*如果里面的参数是%,移动的距离是盒子自身的宽高来对比*/
           ④对行内标签没有效果。

(2)2D旋转

  transform: rotate(45deg);

4.三角形制作 

        div {
            position: relative;
            width: 200px;
            height: 45px;
            border: 1px solid #000;
        }
        div::after{
            content: "";
            position: absolute;
            top: 15px;
            right:15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.5s;
        }
        div:hover::after{
            transform: translateY(50%) rotate(225deg);
        }

5. 转换中心点

   transform-origin: x y ; //(默认为50% 50%---相当于 center center)

 可以跟方位名词: 如transform-origin: left bottom ;也可以跟像素 

 6.缩放（scale）

transform: scale(x,y);  //可以用transform-origin设置中心点
        注意:    transform:scare(1,1);  //宽和高都放大一倍，相当于没有放大
                 transform:scare(2,2);  //宽和高都放大2倍
                 transform:scare(2);  //只写一个参数，第二个参数默认和第一个一样
                 transform:scare(0.5,0.5)；  //缩小

 scale优势就是可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子。

7.倾斜（skew） 

    transform: skew(0deg,0deg);

8.transform连写 

transform:translate() rotate() scale() skew();

9.动画 （animation）

1. @keyframes 动画名 {
                      0% || from{                       /*开始*/
                                     width:100px;
                                }
                      100% || to{                  /*结尾*/
                                     width:200px;
                                }
                     } 

2. 调用动画 

   div{
       width:200px;
       height:200px
       background-color:aqua;  /*浅绿色*/
       margin:100px auto;
       /*调用动画*/
       animation-name: 动画名称;
       /*持续时间*/
       animation-duration:持续时间;
   }

   能通过百分比控制时间长短,在动画的各个环节，如果没有涉及到属性，那么都会直接取默认值 1。

3. 其他

   animation-timing-function:ease(默认，动画以低速开始，然后加快，结束前有变慢) | step(5) | linear(匀速) | ease-in(以低俗开始) | ease-out(以低速结束) | ease-in-out(以低速开始和结束);运动曲线，linear(匀速)
   animation-delay:0;/*何时开始*/
   animation-iteration-count: 1;/*动画被播放次数,还有infinite(无限)*/
   animation-direction:normal;/*是否反向播放，alternate(逆播放)*/
   animation-play-state:running;/*是否正在运行或暂停,paused(暂停)*/
   animation-fill-mode:backwards;/*动画结束后状态,停留在结束状态forwards*/

10.3D转换

近大远小，物体后面遮挡不可见，从屏幕到你现在脸的方向为正值

1.  3D位移：translate3d(x,y,z);                                                                                                       注意:①translateZ一般用px为单位,很少用其他单位；
            ②xyz是不能省略的，如果没有就写0。
2. 透视(perspective):透视的单位是像素，透视写在被观察元素的父盒子上,Z轴越大(正值)物体越大，d视距就是一个人眼睛到屏幕距离。
3. 3D旋转：rotateX(45deg) rotateY(45deg) rotateZ(45deg)
   rotate3d(x,y,z,deg);
4. 3D呈现：transform-style:flat(不开启3D立体空间，默认) | preserve-3d(子元素开启立体空间); /*写在父级盒子*/

 11.浏览器私有前缀：

• -moz-:代表火狐
•  -ms-:代表ie
•  -webkit-:代表safari,chrome
•  -o-:代表Opera

12.提倡写法

   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;

13.关于hank css

   详情见：CSS Hank兼容浏览器的_蜗牛的专栏-CSDN博客 

14. SEO

 搜索引擎优化，利用搜索引擎规则提高网站在有关搜索引擎内自然排名的方式，目的是对网站进行深度优化。

•