利用CSS动画与变形实现加载动画特效

本周学习了CSS动画与变形，课堂上老师演示了几种加载动画的实现，课下自己发现一个比较有意思的加载动画，所以自己实现了一下。

来看一下实现的效果：

代码如下：

html部分：

<div id="box">
        <div id="circle"></div>
        <div id="chunk1"></div>
        <div id="chunk2"></div>
        <div id="chunk3"></div>
    </div>

CSS部分：

外部box样式：

        
        #box{
            width: 800px;
            height: 800px;
            border: 1px solid white;
            position: relative;
            margin: auto;
        }
      

circle样式：

        #circle{
            width: 140px;
            height: 75px;
            border-radius: 50%/50%;  /*设置成椭圆*/
            background: white;
            position: absolute;
            top: 465px;
            left: 50%;
            transform: translateX(-50%);/*居中*/
            animation: 0.75s infinite jump linear;
        } 
        @keyframes jump{
            15%{
                height: 120px;
                width: 75px;
                transform: translateX(-50%) translateY(-45px);
            }
            50%{
                width: 100px;
                height: 100px;
                transform: translateX(-50%) translateY(-345px);
            }
            85%{
                height: 120px;
                width: 75px;
                transform: translateX(-50%) translateY(-45px);
            }
            100%{
                width: 140px;
                height: 75px;
                transform: translateX(-50%) translateY(0);
            }
        }

chunk样式：

        #chunk1{
            width: 120px;
            height: 20px;
            background: white;
            position: absolute;
            top: 400px;
            left: 460px;
            animation: 1.5s infinite move1 linear;
            opacity: 0;
        }
        #chunk2{
            width: 120px;
            height: 20px;
            background: white;
            position: absolute;
            top: 540px;
            left: 340px;
            animation: 1.5s infinite move2 linear;
            opacity: 1;
        }
        #chunk3{
            width: 120px;
            height: 20px;
            background: white;
            position: absolute;
            top: 680px;
            left: 220px;
            animation: 1.5s infinite move3 linear;
            opacity: 0;
        }
        @keyframes move1{
            50%{
                transform: translateX(-120px) translateY(140px);
                opacity: 1;
            }
            100%{
                transform: translateX(-240px) translateY(280px);
                opacity: 0;
            }
        }
        @keyframes move2{
            50%{
                transform: translateX(-120px) translateY(140px);
                opacity: 0;
            }
            51%{
                transform: translateX(120px) translateY(-140px);
                opacity: 0;
            }
            100%{
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
        }
        @keyframes move3{
            1%{
                transform: translateX(240px) translateY(-280px);
                opacity: 0;
            }
            50%{
                transform: translateX(120px) translateY(-140px);
                opacity: 1;
            }
            100%{
                transform: translateX(0) translateY(0);
                opacity: 0;
            }
        }

下面总结一下animation动画和transform变形的知识点。

一.animation动画

逐帧动画，将整个运动过程划分成100分。

1.animation-name

设置动画的名字

值	描述
keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

2.animation-duration

设置动画的持续时间。

3.animation-delay

设置动画的延迟时间。

注：若为负数，则表示动作提前几秒开始。

4.animation-timing-function

设置动画的速度曲线。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

5.animation-iteration-count

设置动画的循环次数。

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

6.animation-fill-mode

规定动画播放之前或之后，其动画效果是否可见。

值	描述
none	在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards	在延迟的情况下，让0%在延迟前生效
forwards	在运动结束的之后，停到结束位置
both	backwards和forwards同时生效

7.animation-direction

设置动画进行的方向。

值	描述
alternate	正反交替进行
reverse	反向进行

注意：

复合写法：没有顺序，如果出现两个时间，则第一个是持续时间，第二个是延迟时间。

 

二.transform变形

transform包括translate位移、scale缩放、rotate旋转、skew斜切。

所有的变形操作都不会影响到其他元素布局。

内联元素不支持变形操作，块元素和内联块元素支持。

 

1.translate

div{
transform:translate(**px ,**px); /*->沿x轴，y轴位移*/
transform:translateX(**px);
transform:translateY(**px);
transform:translateZ(**px);    /* transform 3d*/
}

2.scale

div{
transform:scale(倍数)；/*->宽高按倍数缩放*/
transform:scale(倍数，倍数）; /*->分别对应宽和高*/
transform：scaleX(倍数)
transform：scaleY(倍数)
transform：scaleZ(倍数)   /* transform 3d*/
}

3.rotate

div{
transform:rotate(**deg);  /*->旋转**度，正数顺时针转，负数逆时针转*/
transform：rotateX  /*transform 3d*/
transform：rotateY  /*transform 3d*/
transform：rotateZ  /*transform 2d*/
}

注：rotate（）跟rotateZ（）是等价关系

 

4.skew

div{
transform:skew(**deg,**deg);  /*->针对x和y*/
transform：skewX（）
transform：skewY（）
}

注：skew没有3d写法

 

5.transform-origin基点位置

transform-origin：center center；默认值

transform-origin：**px **px/right top；

 

注意：

• 设置多个值时，执行顺序是先执行后面的操作，再执行前面的。
• 位移会受到后面要执行的缩放、旋转、斜切的影响。

逆战前行，学习不停！！！