<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Loading animation</title>
<style>
html, body{
margin: 0;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
@keyframes loading { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.1); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
.ball {
background-color: #4682B4;
position: absolute;
top: 50%;
left: 50%;
margin-top: -6%;
margin-left: -6%; /* 定位,水平居中垂直居中 */
width: 100px;
height: 100px;
border-radius: 50px; /* 画圆 */
box-shadow: 0px 0px 40px #20B2AA; /* 阴影 */
animation-name: loading; /* 定义关键帧名称*/
animation-timing-function: ease-in-out; /* 定义动画速度曲线 */
animation-iteration-count: infinite; /* 定义动画次数 */
animation-duration: 3s; /* 定义动画时间 */
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
效果如图