tnblog
首页

html/css样式

27人阅读 2019/6/6 19:52 评论: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>


评价
开心的度过每一天
文章
6
评论
8
分类
16
关注
16
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}