animation动画妙用

前端的各位道友们，大家好！今天来聊聊animation动画的妙用，众多周知，通过使用animation可以让元素运动起来。只要能动，我们就可以实现很多有趣的效果，比如网页加载不出来时显示的loading小动画

比如这个一直转圈圈的线条，怎么才能实现呢？

首先我们要思考如何做出这个弧形的线条，其次让它自己转圈起来

我们可以通过做一个正方形，给它的边框加一个宽度，颜色透明，然后让这个正方形的边框变成圆形，再给上边框一个颜色，这样有弧度的线条就完成啦~

接下来再让它旋转起来，给它添加一个旋转动画+1s的线性过渡和无限循环，我们的转圈loading就完成啦~

结构代码如下：

<section>
	<article></article>
</section>
复制代码

样式代码如下：

section{
	width: 300px;
	height: 300px;
	margin:0 auto;	
@keyframes rot{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
article{
	width: 40px;
	height: 40px;
	border:4px solid #fff;
	border-top-color:#ccc;
	border-radius: 50%;
	float: left;
	margin-top: 50px;
	animation: rot 1s linear infinite;
}
复制代码

通过上面的案例，我们还可以制作线条依次伸缩的loading动画

思路：制作五个线条，让他们依次按照垂直中心点缩小50%，第一个线条先运动，后面的依次延迟0.1s

让我们一起来写一下，结构代码如下：

<section>
	<aside>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</aside>
</section>
复制代码

样式代码如下：

section aside{
	margin: 50px;
	float: left;
}
section aside div{
	width: 4px;
	height: 35px;
	background-color: #ccc;
	margin: 2px;
	display: inline-block;	
}
@keyframes loding{
	0%{
		transform:scaleY(1);
	}
	50%{
		transform:scaleY(0.5);
	}
	100%{
		transform:scaleY(1);
	}
}
section aside div:nth-child(1){
	animation: loding 1s 0.1s infinite;
}
section aside div:nth-child(2){
	animation: loding 1s 0.2s infinite;
}
section aside div:nth-child(3){
	animation: loding 1s 0.3s infinite;
}
section aside div:nth-child(4){
	animation: loding 1s 0.4s infinite;
}
section aside div:nth-child(5){
	animation: loding 1s 0.5s infinite;
}
复制代码

总结：

1.动画关键帧的定义，关键帧定义可以实现各种动画效果的运动过程。

2.有一些初学的前端道友们不知道animation要添加给谁？animation添加给要改变的元素。

3.运动时间可根据需求来设置。

4.动画过渡类型给大家推荐一个动画类型的库：cubic-bezier.com/

各位前端的道友们，我们的animation动画有点意思吧，来来来...接着奏乐，接着舞，让我们敲起来吧。

animation动画妙用

Supongo que te gusta