使用HTML+CSS制作加载动画
程序员文章站
2024-01-17 22:06:52
...
简单的页面加载动画
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>加载动画</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="loading"></div>
</body>
</html>
css样式部分
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(75deg);
width: 15px;
height: 15px;
}
.loading::before,.loading::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 15px;
height: 15px;
border-radius: 15px;
animation: loading 1.5s infinite linear;
}
.loading::before{
box-shadow: 15px 15px red,-15px -15px green;
}
.loading::after{
box-shadow: 15px 15px blue,-15px -15px gray;
transform: translate(-50%,-50%) rotate(90deg);
}
@keyframes loading {
50%{
height: 45px;
}
}
效果如图
上一篇： 0x3 Python学习之路之Python列表copy
下一篇： tabs页签切换