* {
	padding: 0;
	margin: 0;
}
/* 背景盒子居中 */
.box {
	background: black;
	width: 800px;
	height: 800px;
	margin: 20px auto;
	position: relative;
	padding-top: 20px;
	text-align: center;
}
/* 盒子圆角加背景黑色 */
.bay {
	background: #ffffff;
	width: 300px;
	height: 400px;
	margin: 20px auto;
	border-radius: 20px 20px 10px 10px;
	position: relative;
}
/* 头顶电池,before为向选定元素前插入内容 */
.bay::before {
	content: "";
	width: 50px;
	background: #ffffff;
	height: 30px;
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -25px;
	border-radius: 5px 5px 0 0;
}
/* 盒子里颜色变化主要效果 */
.bay::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 90%;
	bottom: 0;
	background: linear-gradient(to bottom, #aaffff, #66c3d1, #41a6ff);
	animation: charge 10s linear infinite;
	border-radius: 0 0 10px 10px;
}
/* 动画ani 此动画dni后面的内容屏蔽可为去波浪后的效果 */
@keyframes charge {
	0% {
		top: 100%;
		filter: hue-rotate(90deg)
	}

	95% {
		top: 5%;
		border-radius: 0;
	}

	100% {
		top: 0%;
		border-radius: 20px 20px 10px 10px;
		filter: hue-rotate(0deg)
	}
}
/* 盒子插入两个 "border-radius"实现圆角 */
.hua {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	z-index: 1;
	overflow: hidden;
	border-radius: 20px 20px 10px 10px;
}
/* 圆角盒子1,动画旋转参考zhuan */
.hua::before{content: "";
	width: 450px;
	height: 450px;
	position: absolute;
	background: rgba(255,255,255,1);
	border-radius: 40% 30%;
	left: -20%;
	animation: zhuan 10s linear infinite;
}
/* 圆角盒子2,动画旋转参考fan */
.hua::after{content: "";
	width: 450px;
	height: 450px;
	position: absolute;
	background: rgba(255,255,255,1);
	border-radius: 42% 40%;
	left: -20%;	
	animation: fan 10s linear infinite;
}
@keyframes zhuan{
	0%{transform: rotate(0deg);bottom: 0%;}
	100%{transform: rotate(360deg);bottom: 100%;}
}
@keyframes fan{
	0%{transform: rotate(30deg);bottom: 0%;}
	100%{transform: rotate(360deg);bottom: 100%;}
}
h1{color: #FFFFFF;}