注册 登录
当前位置: 首页 » 开发笔记 » 详情:一个纯CSS加载动画

一个纯CSS加载动画

一个很好看的CSS加载动画。

<!-- html -->
<div class="loader"></div>
/*CSS*/
@keyframes wiggle{
	0% {
		transform:rotate(0) scale(1)
	}
	50% {
		transform:rotate(180deg) scale(.5)
	}
	100% {
		transform:rotate(360deg) scale(1)
	}
}
.loader{
	margin: 0 auto;
	display: inline-block;
	width: 100%;
	text-align: center;
	height: 50px;
}
.loader::after, .loader::before{
	box-sizing: border-box;
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	border: 8px solid transparent;
	border-radius: 50%;
	animation: wiggle 1.4s ease infinite;
}
.loader::before{
	border-top-color: #4285f4;
	border-bottom-color: #34a853;
}
.loader::after{
	border-left-color: #fbbc05;
	border-right-color: #ea4335;
	animation-delay: .7s;
}
所有资源来源于各大网盘或磁力链,本站不储存任何资源文件,只展示资源链接,侵删!
微信联系
移动端浏览