CSS_渐变过渡_动画

  1.渐变

         指的是：颜色从一个方向到另一个方向进行改变，从一个角度到另外一个角度进行改变

         线性渐变：方向

         径向渐变：从中心向四周进行改变

         背景产生的====由浏览器进行加载显示的====比较均匀，兼容性比较强的，使用背景图片平铺的话，有可能会失真

         1）线性渐变（实际开发应用频率会比较高）

            background:linear-gradient(to，方向词，col1，col2，col3)

            取值：linear-gradient=====线性渐变

             to  方向词======到达某一个方向

             to  top=========到达上边，从下边开始的

             col1============开始颜色

             col3============结束颜色

           

              方向的取值问题：

              1）取值可以为：to 方向词  到达一个方向

              2）不跟方向====从上到下  to  bottom

              3）到达某一个对角：to  top  left  =  left top  = 到达左上角

              4）线性渐变是按照一个角度进行渐变的：一个度数 deg

              5）不跟方向，不跟角度，不跟度数的话，默认是多少度？

               to bottom = 180deg/-180deg

         2）径向渐变

            颜色从中心点向四周进行扩散

            background：redial-gradient（center,shape,size,col1,col2,col3）

              center======渐变中心，默认的渐变中心在元素的正中位置（对角线的交叉点）

              shape=======渐变形状（circle，ellipse）======默认值是椭圆

              size========渐变大小（需要调整渐变中心的位置）====渐变大小是到达对角线的位置

              col1========渐变的开始颜色

              col2========渐变的中间颜色

              col3========渐变的结束颜色

              元素如果是正方形 渐变形状为正圆  元素如果是长方形 渐变形状为椭圆

              到达最远的边结束======farthest-side

              到达最近的边结束======colsest-side

              到达最远的角结束======farthest-corner

              到达最近的角结束======colsest-corner

              -webkit-radial-gradient  浏览器兼容 适应更多浏览器

         3）重复渐变

            线性重复渐变

             background：repeating-linear-gradient（）

            径向重复渐变

             background：repeating-radial-gradient（）

        2.过渡

           代表的是元素的一种状态向另外一种状态缓慢的发生改变===动态的效果

             大小，颜色，圆角，位置的移动，等等等

             属性：transition

             取值：transition：all 3s  linear 5s

             all=========所有参与过渡的属性=======transition-propurty

             3s==========过渡动画花费的时间=======transition-duration

             linear======过渡动画的类型（好多种）---------------transition-timing-function

               匀速的意思

             5s==========过渡延迟执行时间（多少秒之后再去执行）--transition-delay

             过渡属性属于动画的一种，这个动画需要配合属性的事件才能完成，

             大部分属性都能参与过渡，display是不能参与过渡的

             二级菜单要用高度去做  配合overflow：hidden

             过渡动画的类型有好多种

             linear=========匀速

             ease===========逐渐慢下来

             ease-in =======加速

             ease-out=======减速

             ease-in-out====先加速后减速

             贝塞尔曲线：

             属性值：cubic-bezier（）

             逐帧动画：transition-timing-function：steps（动画执行的步数）

        3.2D 中的平面效果

            学习的就是四个函数：平移，旋转，缩放，倾斜

            1）平移

               元素位于平面上面的水平，垂直方向上面的移动

               属性：transform

               取值：translateX（）

                     translateY（）

                     translate（）==给值的时候给一个值代表的是水平方向如果你先要使用translate属性值的数，水平垂直一起移动需要给两个值

                 注意：1）与margin对应的效果一致，如果没有改变元素的大小的话，添加过  渡效果的话，

                     平移属性是平滑的，不会出现闪烁的效果

                       2）如果你的大小形状发生改变的话，照样使用平移属性也会出现闪烁情况，====动画属性解决

            2）旋转

               元素位于平面上面的中心或者是沿着某一个位置进行旋转

               属性：transform

               取值：rotateX（）=======沿着x轴进行旋转

                     rotateY（）=======沿着y轴进行旋转

                     rotate（）========沿着中心进行旋转

                注意：调整旋转中心需要在默认初始状态下设置

                transform-origin：top center：

                  旋转中心可以设置在元素内部，也可以设置在元素边上，也可以设置在元素外部

                  默认的旋转中心在元素正中位置，左上角为0px 0px的位置

            3)缩放

             元素位于页面中进行缩小和放大，占页面的空间位置

             属性：transform

             取值：scaleX（）=====沿着水平方向缩放

                   scaleY（）=====沿着垂直方向缩放

                   scale（）======沿着对应的中心进行缩放

                   如果scale里面跟一个值的话，就代表的是水平和垂直都进行缩放一样的倍数

                   如果不一样的话，第一个参数代表的是水平方向，第二个参数代表的是垂直方向

                   取值为>1的值的时候 沿着中心放大

                   取值为=1的值的时候，不缩小不放大

                   取值为<1并且>0的时候，缩小

                   取值为=0的时候，隐藏元素

                   取值可以小于0

                   -2==========-（父号）代表的是反方向，-（负号）后面的值代表的是缩小或者是放大

            4)倾斜

              让元素在页面中产生一个倾斜角，类似旋转但是作用不一样

              属性：transform

              取值：skewX（）=====沿着x轴倾斜，====形成一个与y轴的夹角

                    skewY（）=====沿着y轴倾斜，====形成一个与x轴的夹角

                    skew（）======沿着中心倾斜，===形成与x轴 y轴的夹角都有

           

            半圆：

            border-top-left-radius:200px;

            border-bottom-left-radius:200px;

            border-radius:200px 0px 0px 200px

            知识点：结构伪类  找第十三个 子元素

            .box>div:nth-child(13){

              background-color:orange;

            }

           

            /* 除了7之外的所有的盒子都边透明 */

            .box>div:not(:nth-child(7)){

            background-color: rgba(0,0,0,0);

        }