Css3动画总结

       01.阴影
            --01.文本阴影
                text-shadow：水平轴 垂直轴 模糊度 颜色；
                text-shadow：x-offset y-offset blur color；
        
            --02.凹凸效果
                text-shadow：-4px 0px 0px pink,0px -4px 0px purple,
                        4px 0px 0px skyblue,0px 4px 0px cyan;
        
            --03.文本描边
                -webkit-text-stroke：width color；
                -webkit-text-stroke：2px purple；    ！！！注意浏览器兼容写法 --webkit-
            
            --04.盒子阴影
                四个参数：
                    box-shadow：水平方向 垂直方向 模糊度 颜色；
                    box-shadow：5px 5px 0px green；
                
                五个参数：
                    box-shadow：水平方向 垂直方向 模糊度 模糊距离 颜色；
                    box-shadow：4px 4px 0px 0px pink；
                
            --05.线型渐变
                background：方向 初始颜色 结束颜色；   ！！！一定注意是background，如果是background-color则无用
                background: linear-gradient(to 方向,颜色);
                background：linear-gradient(to top,red,green)；
        
                线性渐变除了开始和结束，可以设置多个颜色,个数不限,注意的是一定要用逗号隔开数据
                    例如：
                      --background：linear-gradient(to top,red,orange,yellow,green,cyan,bkue,purple)；
        
            --06.径向渐变
                background：-webkit-radial-gradient（position ahapa start-color stop-color）；
                position    确定中心位置
                shapa        形状
                start-color 开始颜色
                stop-color    结束颜色
                
                background：-webkit-radial-gradient（center circle red green）；
        
        02.变化 transform
            --01.transform-style：preserve-3d；
                transform-style：preserve-3d；    元素开启3d立体空间,默认值是    flat 不开启
                    总结：
                        如果元素是3d模式的话,不写preserve-3d的话,会以二维空间的模式展现出来
                    没有立体的效果
        
            --02.perspective: 属性值;                元素开启景深模式（视频）
                --开启景深模式语法
                    perspective: 200px;
                    总结：
                    改变了元素的视距,元素本身的宽度并未收到影响,还是本身的宽度,只是视觉上发生了变化
                    可以理解为从面前看到一个物体,变成了在元素看到的这个物体
                    景深模式的单位是像素px
        
            --03.transforme:translate;
                --平移的语法
                    transform: translate(20px,20px);
                    transform: translateX(20px);
                    transform: translateY(20px);
                    总结:
                    如果要设置两个属性直接在括号里设置,属性值之间要用逗号隔开,属性值的单位是px像素
                    不需要添加方向轴
                    如果两个属性都是单独设置的,下面的属性会把上面的属性覆盖掉
        
            --04.transform:scale(0.5);
                --缩小的语法
                    transform: scaleX(0.5);
                    transform: scaleY(0.5);
                    transform: scale(0.5,0.5);
                    总结:
                        如果要设置两个属性直接在括号里设置,属性值之间要用逗号隔开,属性值没有单位
                        如果同时进行x轴和y轴的缩放,不需要添加方向轴
                        如果两个属性都是单独设置的,下面的属性会把上面的属性覆盖掉
                        他们缩小(放大)对应的宽高
                        scale()的取值范围为0-1之间
                        --如果取值的范围在0-1,就是进行缩小
                        --如果取值的范围大于1,就是进行放大
                        --如果取值得范围在-1-0,那么这个负数的值就是和正常0-1之间一样（直接去掉-号）
                        --如果取值得范围小于-1,那么这个负数的值就是和放大的值一样（直接去掉-号）
        
            --05.transform:skew(20deg);
                --扭曲的语法
                    1.skewX(30deg)
                         向横向倾斜指定度数
                         x取值为正，X轴不动，y轴逆时针倾斜一定角度
                         x取值为负，X轴不动，y轴顺时针倾斜一定角度
                    2.skewY(30deg)
                         向纵向倾斜指定度数
                         y取值为正，y轴不动，x轴顺时针倾斜一定角度
                         y取值为负，y轴不动，x轴逆时针倾斜一定角度
                    3.skew(xdeg,ydeg)
                         xdeg :横向倾斜度数
                         ydeg :纵向倾斜度数
                         x取值为正，X轴不动，y轴逆时针倾斜一定角度
                         x取值为负，X轴不动，y轴顺时针倾斜一定角度
                         y取值为正，y轴不动,x轴顺时针倾斜一定角度
                         y取值为负，y轴不动,x轴逆时针倾斜一定角度
                    总结:
                        如果要设置两个属性直接在括号里设置,属性值之间要用逗号隔开,属性值的单位是deg角度
                        不需要添加方向轴
                        如果两个属性都是单独设置的,下面的属性会把上面的属性覆盖掉
        
            --06.transform:rotate(20deg);
                --旋转的语法
                    transform: rotateX(10deg);
                    transform: rotateY(10deg);
                    1.rotateX(30deg)
                        在横轴 x轴不动 y轴旋转指定度数
                    2.rotate(30deg)
                        在纵轴 y轴不动 x轴旋转指定度数
                        
                    总结:
                    旋转的时候以自身设置的属性去执行
                    如果两个属性都是单独设置的,下面的属性会把上面的属性覆盖掉,括号里的单位是deg
                    在旋转的时候可以自定义旋转的中心点
                    
                    3.rotate3d(0,0,0,20deg)
                                
                    
        
            --07.transform-origin：top center；
                定义中心的语法:
                    --原点:位置 位置;
                    --transform-origin:top center;
                    
                    两种写法：
                        transform-origin:top center;
                        transform-origin:50% 100%;
        
        03.过渡 transition
            --01.什么是过渡？
                过渡就是一个元素样式上的变化,从一个样式,变成了另一个样式的过程
                如果把这个过程呈现到页面上,就是所说的动画
                    
            --02.过渡的语法
                --01.组合式写法
                    过渡语法：过渡属性 过渡时间 过渡方式 延时时间；
                    transition：background 5s linear 0s；
        
                --02.独立式语法
                    transform-property：background；    过渡属性值
                    transform-duration：5s；        过渡时间
                    transform-timing-function：linear；    过渡方式
                    transform-delay：0s；            延时过渡
                    总结：
                        01.过渡属性值改变的是css属性的值
                            例如：
                                background-color
                                width
                                等...
                        02.过渡的时间都以秒为单位
                            例如：
                                5s
                        03.什么是过渡的方式？
                            指这个元素运动的时候是以什么方式进行运动的
                            它的值有以下几种
                            linear            匀速
                            auto                从快到慢
                            ease-out            从快到慢
                            ease-in            从慢到快
                            ease-in-out            加速    
                        04.延时的时间是可选参数,到多少秒以后开始运动
                            例如：
                                5s            
        
        04.动画 animation
            --01.什么是动画？
                它可以将一个元素的属性,从初始值运动到第二个值,在运动到第三个值,依次这样类推
                组成了一个循环体,就形成了动画
            --02.动画的语法
                --01.组合式语法
                    动画语法：动画名称 动画时间 动画方式 延时时间 动画次数 动画方向
                    animation：Rotate 10s ease-in 0s infinite normal；
                --02.独立式语法
                    动画名称: naimation-name:otate;            改变元素的css属性
                    动画时间：naimation-duration:0s;            动画的持续时间
                    动画方式：naimation-timing-function:inear;    动画的运动方式
                    动画延时：naimation-delay:0s;                几秒后开始执行动画
                    动画次数：naimation-iteration:infinite;        动画的播放的次数
                    动画方向：naimation-direction:normal;        动画运动的方向
        
        05.关键帧
            01.什么是关键帧？
                --帧是指某一个指定的时间段
            
            02.关键帧的作用？
                --需要动画连续的运动起来，那么必须使用关键帧来设定每一步的操作
                  才能实现连续的运动。
                --需要注意的是,动画名字和需要进行动画的元素一定要一致
                --如果需要控制动画的运动,要把动画的名称和运动的轨迹进行定义
        
            例如：
                @keyframes Rotate{
                    0%{
                        tranmsform：rotate(0deg)；
                    }
                    100%{
                        transform:rotate(360deg);
                    }    
                }
        
                @keyframes Rotate{
                    from{
                        transform:rotate(0deg);
                    }
                    to{
                        tranmsform：rotate(360deg)；
                    }
                }