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

来看一下实现的效果：

代码如下：

html部分：

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

CSS部分：

外部box样式：

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

circle样式：

[code]
#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样式：

[code]        #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

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

2.scale

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

3.rotate

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

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

 

4.skew

[code]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；

 

注意：

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

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

 

• 点赞
• 收藏
• 分享
• 文章举报

绝望的东北大米 发布了8 篇原创文章 · 获赞 0 · 访问量 249 私信 关注