乒乓加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
	margin:0;
	background:#D80032;
}

.green {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#db6262;
}

.green.confirm {
	animation: greenFill 4.5s linear 1;
	animation-fill-mode:forwards;
}

@keyframes greenFill {
	0%, 60% {
		background:#db6262;
	}
	
	70%, 100% {
		background:#35CE8D;
	}
}

.box {
	display:block;
	margin:auto;
	width:400px;
	height:400px;
	position:relative;
	cursor:pointer;
	margin-top:7%;
}

.shape01 {
	position:absolute;
	width:8%;
	height:10%;
	background:#fff;
	right:48%;
	top:40%;
	transform:rotate(0deg);
}

.box.active .shape01 {
	animation: pongRight 4.5s linear 1;
	animation-fill-mode:forwards;
}

@keyframes pongRight {
	0% {
		right:51%;
		width:8%;
		height:10%;
		top:40%;
		transform:rotate(0deg);
	}
	
	10% {
		right:0;
		width:3%;
		height:20%;
		top:40%;
		transform:rotate(0deg);
	}
	
	20%, 30% {
		right:0;
		width:3%;
		height:20%;
		top:20%;
		transform:rotate(0deg);
	}
	
	40%, 50% {
		right:0;
		width:3%;
		height:20%;
		top:60%;
		transform:rotate(0deg);
	}
	
	60% {
		right:0;
		width:3%;
		height:20%;
		top:6%;
		transform:rotate(0deg);
	}
	
	70%, 100% {
		right:45%;
		width:3%;
		height:20%;
		top:41%;
		transform:rotate(45deg);
	}
}

.triangle {
	position:absolute;
	width:14%;
	height:6%;
	background:#fff;
	left:41%;
	top:48%;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
	transform:scale(1.0);
}

.box.active .triangle {
	animation: triangle 4.5s linear 1;
	animation-fill-mode:forwards;
}

@keyframes triangle {
	0% {
		transform:scale(1.0);
	} 
	
	10%, 100% {
		transform:scale(0.0);
	}
}

.shape02 {
	position:absolute;
	width:14%;
	height:2%;
	background:#fff;
	left:41%;
	top:56%;
	transform:rotate(0deg);
}

.box.active .shape02 {
	animation: pongLeft 4.5s linear 1;
	animation-fill-mode:forwards;
}

@keyframes pongLeft {
	0% {
		left:41%;
		width:8%;
		height:10%;
		top:56%;
		transform:rotate(0deg);
	}
	
	10%, 20% {
		left:0;
		width:3%;
		height:20%;
		top:40%;
		transform:rotate(0deg);
	}
	
	30%, 40% {
		left:0;
		width:3%;
		height:20%;
		top:0;
		transform:rotate(0deg);
	}
	
	50%, 60% {
		left:0;
		width:3%;
		height:20%;
		top:88%;
		transform:rotate(0deg);
	}
	
	70%, 100% {
		left:43.5%;
		width:3%;
		height:9%;
		top:50%;
		transform:rotate(-45deg);
	}
}

.ball {
	position:absolute;
	width:6%;
	height:6%;
	background:#fff;
	left:47%;
	top:48%;
	transform:scale(0.0);
	border-radius:50%;
}

.box.active .ball {
	animation: ball 4.5s linear 1;
	animation-fill-mode:forwards;
}

@keyframes ball {
	0% {
		transform:scale(0.0);
		left:45%;
		top:48%;
	} 
	
	10% {
		transform:scale(1.0);
		left:45%;
		top:48%;
	}
	
	20% {
		left:92%;
		top:26%;
		transform:scale(1.0);
	}
	
	30% {
		left:2%;
		top:6%;
		transform:scale(1.0);
	}

40% {
		left:92%;
		top:66%;
		transform:scale(1.0);
	}
	
	50% {
		left:2%;
		top:92%;
		transform:scale(1.0);
	}
	
	60%, 100% {
		left:80%;
		top:25%;
		transform:scale(0.0);
	}
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg