正方形加载动画

下载代码

html

css

分享到微信朋友圈

html

</div>
	<div class="inner">
		<div class="square" style=" animation-name: pulse; animation-duration: 1s; width: 2px; height: 2px; margin-left: 30px; margin-top: 30px; animation-delay: 0s;"></div>
		<div class="square" style=" animation-name: pulse; animation-duration: 1s;  width: 2px; height: 2px; margin-left: 40px; margin-top: 30px; animation-delay: .1s;"></div>
		<div class="square" style=" animation-name: pulse; animation-duration: 1s;  width: 2px; height: 2px; margin-left: 50px; margin-top: 30px; animation-delay: .2s;"></div>

</div>
</div>

css

html, body{
	width: 100%;
	height: 100%;
	overflow: hidden;

margin: 0px;
	padding: 0px;

background: black;
}

.holder{
	width: 320px;
	height: 320px;

position: absolute;
	top: 50%;
	left: 50%;
	margin: -160px 0 0 -160px;

display: grid;
	grid-gap: 10px;
	grid-template-columns: 100px 100px 100px;
	grid-auto-rows: minmax(100px, auto);
}

.inner{
	border: 3px solid white;
}

@keyframes rotate{
	0%{
		transform: rotate(0deg);
	}

20%{
		/*transform: rotate(180deg);*/
	}

40%{
		transform: rotate(360deg);
	}

100%{
		transform: rotate(360deg);
	}
}

@keyframes rotate2{
	0%{
		transform: rotate(0deg);
	}

40%{
		/*transform: rotate(180deg);*/
	}

80%{
		transform: rotate(360deg);
	}

100%{
		transform: rotate(360deg);
	}
}

@keyframes rotate3{
	0%{
		transform: rotate(0deg);
	}

30%{
		/*transform: rotate(180deg);*/
	}

60%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes squarecircle{
	0%{
		border-radius: 0;
		transform: rotate(0deg);
	}

50%{
		border-radius: 20px;
		transform: rotate(180deg);
	}

100%{
		border-radius: 0;
		transform: rotate(360deg);
	}
}

@keyframes threed{
	0%{
		transform: rotate3d(1, 0, 0, 0deg);
	}

100%{
		transform: rotate3d(1, 0, 0, 360deg);
	}
}

@keyframes threed2{
	0%{
		transform: rotate3d(0, 1, 0, 0deg);
	}

100%{
		transform: rotate3d(0, 1, 0, 360deg);
	}
}

@keyframes scale{
	0%{
		transform: scale(1) rotate(0deg);
	}

100%{
		transform: scale(0) rotate(180deg);
	}
}

@keyframes pulse{
	0%{
		transform: scale(1);
	}

50%{
		transform: scale(0);
	}

100%{
		transform: scale(1);
	}
}

@keyframes rot{
	0%{
		transform: rotate(0deg);
	}

100%{
		transform: rotate(90deg);
	}

}

@keyframes scaleside{
	0%{
		transform: scale(1, 1);
	}
	25%{
		transform: scale(1, .2);
	}
	50%{
		transform: scale(.2, .2);
	}
	75%{
		transform: scale(.2, 1);
	}
	100%{
		transform: scale(1, 1);
	}
}

@keyframes rotscale{
	0%{
		transform: rotate(0deg) scale(1);
	}

50%{
		transform: rotate(180deg) scale(0);
	}

100%{
		transform: rotate(360deg) scale(1);
	}
}

@keyframes cornerrot{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(90deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.square{
	width: 20px;
	height: 20px;

margin: 34px;
	border: 3px solid white;
	position: fixed;

transform: rotate(0deg);
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}

JavaScript

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