分类:
我的文章
代码：
<!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>评价
