前端动态效果学习

一、定位：运用子绝父相的方法，灵活的改变盒子在网页中的位置。

父级：（position：relative）

子级：（position：absolute）

子级以父级为参照物，left、right、top、bottom进行边偏移调整位置。

  案例中时常要求盒子定位居中，第一步将子级绝对定位，再将盒子水平、垂直边偏移50%后，但此时盒子位置仍不居中，是因为此时偏移的是父级尺寸的一半，需要再将子级向左、上移动自身尺寸的一半，才能水平居中。

transform：translate（-50%，-50%）

二、平面转换 transform

（1）平移：通过translate()函数可以实现元素在水平和垂直方向上的移动，取值可为像素单位数值也可为参照自身尺寸的百分比。

translate：translate(X,Y)  ，也可单独设置X轴或Y轴，即translateX()，translateY()

（2）旋转：通过rotate()函数可以实现元素的旋转效果。取值：正（顺时针），负（逆时针）

例如：transform: rotate(45deg); 表示将元素顺时针旋转45度。

（3）缩放：通过scale()函数可以实现元素的缩放效果。例如：transform: scale(1.5, 0.5); 表示将元素在水平方向上放大1.5倍，在垂直方向上缩小0.5倍。

以下为播放特效的案例，运用定位、缩放、透明度变化等方法

.pic{
            position: relative;
            overflow: hidden;
        }
.pic::after{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;
            content: '';
            width: 60px;
            height: 60px;
            background-image: url(../image/播放按钮.jpg);
            transform: scale(5);
            opacity: 0;
            transition: all .5s;
            
        }
.box li:hover .pic::after{
            transform: scale(1);
            opacity: 0.5;
        }

实现效果如下：将鼠标悬停到盒子上方时，播放按钮出现，并逐渐变小，透明度减弱变清晰，最终定格在图像版心。

（4）渐变：分为线性渐变与径向渐变

线性渐变：background-image：linear-gradient（

                      渐变方向             -------------to 方向名词；角度度数

                      颜色1 终点方向2

                      颜色2 终点方向2）

径向渐变：background-image：radial-gradient（

                      半径   at  圆心位置             -------------半径两条为椭圆

                      颜色1 终点方向2

                      颜色2 终点方向2）

（5）原点变换：通过transform-origin属性可以指定元素的变换原点，默认情况下为元素的中心点。可以通过指定具体的像素值、百分比或关键字（如top、bottom、left、right等）来改变变换原点的位置。

三、空间转换

（1）平移：transform：translate3d（X，Y，Z）

（2）视距 perspective：指定了观察者与z=0平面的距离，为元素增加透视效果（近小远大，近实远虚）；通常将属性添加给父级，取值范围800-1200

（3）空间旋转：运用左手法则判断方向，rotateX（）、rotateY（）、rotateY（）

      以下为3d导航的案例，鼠标点击到导航时，图像会进行反转。

        .nav ul{
            display: flex;
        }
        .nav li{
            position: relative;
            list-style: none;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transform-style: preserve-3d;
            transition: all 0.5s;
        }
        .nav li a{
            position: absolute;
            left: 0;
            top: o;
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: #fff;
            text-align: center;
        }
        .nav li a:first-child{
            background-color: green;
            transform: translateZ(20px);
        }
        .nav li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px) ;
        } 

        .nav li:hover{
            transform: rotateX(-90deg);
        }

（4）立体呈现：transform-style：preserve-3d

（5）缩放：scale3d（X，Y，Z），也可分轴缩放scaleX（）、scaleY（）、scaleY（）

四、动画：实现多个状态间的变化过程，且动画过程可控（重复播放、最终画面、是否暂停）

（1）定义动画

@keyframes 动画名称{from{} to{}}

@keyframes 动画名称{0%{} 10%{}......100%}

（1）使用动画

animation：动画名称 动画时长  速度曲线  延迟时间  重复次数  动画方向  执行完毕状态

     以下为走马灯案例，将图片flex布局，使用动画效果，图片依次向左平移，不断重复，形成走马灯图像，当鼠标放置到图像时，才会停止移动。该案例运用了无缝动画原理，需要复制开头图片到结尾位置（图片累加宽度=区域宽度），否则会出现留白。

        .box{
            margin: 100px auto;
            width: 600px;
            height: 112px;
            border: 3px solid #000;
            overflow: hidden;
        }
        .box ul{
            display: flex;
            animation: move 6s infinite linear;
        }
        .box ul li{
            
            list-style: none;
        }
        img{
            display: block;
            width: 200px;
        }
        @keyframes move{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-1400px);
            }
        }
        .box:hover ul{
            animation-play-state: paused;
        }