本周学习了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;
注意:
- 设置多个值时,执行顺序是先执行后面的操作,再执行前面的。
- 位移会受到后面要执行的缩放、旋转、斜切的影响。
逆战前行,学习不停!!!