原

html/css样式

2856人阅读 2019/6/6 19:52 总访问：13851 评论：0 收藏：0 手机

分类: 我的文章

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	
		<style type="text/css">
			*{
	padding: 0;
	margin: 0;
	
}
.loading-screen{
	width: 100%;
	height: 100%;
	background: #6a89cc;
	/*成绝对定位*/
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	/*居中*/
	align-items: center;
}
.loading-screen::before{
	content: "";
	/*这个是绝对定位*/
	position: absolute;
	width: 80px;
	height: 80px;
	background: #f8c291;
	left: 20%;
	 /*把元素沿着横向(x轴)移动自身宽度的50% 旋转*/
	transform: translateX(-50%) rotate(0);
	border-radius:20px ;
	/*规定完成动画所花费的时间,以秒或毫秒计*/
	animation: loading 4s infinite linear;
	
}
/* @keyframes创建动画,创建动画是通过逐步改变从一个CSS样式到另一个CSS样式,在动画过程中*/
@keyframes  loading{
	from{
		transform: translate(-50%) rotate(0deg);
	}
	50%{
		left: 80%;
	}
	to{
		transform: translate(-50%) rotate(1440deg);
	}
}

		</style>
	</head>
	<body>
		<div class="loading-screen"></div>
	</body>
</html>

评价

悟小小空

2020/11/10 20:18:13

哈哈哈

正在更新中

开心的度过每一天

博主信息

排名

文章

粉丝

文章类别

我的文章 3篇