CSS3 box-shadow实现背景动画

前言

语法： box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow，向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

参数说明：

ok，基础知识了解完毕，完成背景动画效果，先来预览一下。

第一步（添加多个阴影）

<div class="shadow"></div>

添加样式

.shadow {
	position: relative;
	width: 250px;
	height: 250px;
	border: 1px solid rgb(26, 18, 18);
	box-sizing: border-box;
	margin: 0 auto;
	float: left;
	overflow: hidden;
}
.shadow::before {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	top: -50px;
	left: -50px;
	box-shadow: 50px 50px blue,  150px 50px red,  250px 50px pink, 
				50px 100px,  150px 100px, 250px 100px, 
				50px 150px, 150px 150px, 250px 150px, 
				50px 200px, 150px 200px, 250px 200px, 
				50px 250px, 150px 250px, 250px 250px;
}

这里box-shadow，第一行添加3个阴影，分别用不同颜色区分，和效果图一比较你应该就懂了，用3x5个阴影块，完成250px的正方形。

第二步（平移动画）

.shadow::before{
	...
	...
	animation: move 3s infinite linear;
}
@keyframes move {
	25% {
		transform: translate(50px);
	}
	50% {
		transform: translate(0px);
	}
	75% {
		transform: translate(0px);
	}
	100% {
		transform: translate(0px);
	}
}

第三步（结合阴影平移动画）

@keyframes move {
	25% {
		transform: translate(50px);
		color: coral;
		box-shadow: 50px 50px blue, 150px 50px red, 250px 50px pink, 
					50px 100px, 150px 100px, 250px 100px, 
					50px 150px, 150px 150px, 250px 150px, 
					50px 200px, 150px 200px, 250px 200px, 
					50px 250px, 150px 250px, 250px 250px;
	}
	50% {
		transform: translate(0px);
		color: brown;
		border-radius: 0;
		box-shadow: 50px 50px, 150px 50px, 250px 50px, 
					100px 100px, 200px 100px, 300px 100px, 
					50px 150px, 150px 150px, 250px 150px, 
					100px 200px, 200px 200px, 300px 200px, 
					50px 250px, 150px 250px, 250px 250px;
	}
	75% {
		transform: translate(0px);
		color: teal;
		border-radius: 50%;
		box-shadow: 50px 50px, 150px 50px, 250px 50px, 
					100px 100px, 200px 100px, 300px 100px, 
					50px 150px, 150px 150px, 250px 150px, 
					100px 200px, 200px 200px, 300px 200px, 
					50px 250px, 150px 250px, 250px 250px;
	}
	100% {
		border-radius: 0%;
		box-shadow: 50px 50px, 150px 50px, 250px 50px, 
					50px 100px, 150px 100px, 250px 100px, 
					50px 150px, 150px 150px, 250px 150px, 
					50px 200px, 150px 200px, 250px 200px, 
					50px 250px, 150px 250px, 250px 250px;
	}
}

动画解析：
1、 3s内动画分成4步（3000/4=750ms完成一个步骤）
2、 第一步：整体向右平移50px
3、 第二步：1,3,5行阴影回到原来的位置，2,4行位置保持不变
3、 第三步：所有阴影边框变成圆角border-radius: 50%;
4、 第四步：2,4行回到原来位置。

最终效果预览