<!DOCTYPE html>
<html>
<head>
<meta charset='uft-8'>
<title>简单的波浪加载的动画</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
.wave{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 200px;
width: 200px;
border-radius: 50%;
background: url(img/wave.png) no-repeat;
background-position-y: -250%;
animation: wave 1s infinite linear;
transition: background-position-y 2s linear;
background-color: black;
}
.pres{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 20px;
}
@keyframes wave{
from{
background-position-x: 0;
}
to{
background-position-x: 100%;
}
}
</style>
</head>
<body>
<div id="wave" class="wave">
<span id="pre" class="pres"></span>
</div>
</body>
<script>
(function() {
let current = 1
let wave = document.getElementById('wave')
let pre = document.getElementById('pre')
wave.style.backgroundPositionY = '50%'
let preId = setInterval(() => {
pre.innerText = current++ + '%'
}, 20)
setTimeout(() => {
clearInterval(preId)
}, 2000)
}());
</script>
</html>
需要准备一张图片：
效果：
