css⽔位图波纹特效⽔波纹动效
直接上代码
通过遮罩和动画实现⽔位图波纹特效
可以通过输⼊0-100的数字或者 拖动滑动条调节⽔位的⾼低 (通过修改wave-mask的top)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 3px solid #67c23a;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
padding: 7px 7px;
overflow: hidden;
}
.wave{
position: relative;
width: 100px;
height: 100px;
background-image:linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
border-radius: 50%;
box-shadow: 1px 3px 3px 0 rgba(139, 139, 139, 0.822);
}
.wave-mask{
position: absolute;
width: 200px;
height: 200px;
top: 100%;
left: 50%;
border-radius: 39%;
background-color: white;
transform:translate(-50%, -100%)rotate(0);
animation: toRotate 10s linear infinite;
z-index: 20;
}
@keyframes toRotate{
50%{
transform:translate(-50%, -100%)rotate(180deg);
}
100%{
transform:translate(-50%, -100%)rotate(360deg);
}
}
.tips{
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform:translate(-25px, -25px);
text-align: center;
line-height: 50px;
z-index: 30;
z-index: 30;css特效文字
}
</style>
</head>
<body>
<div class="container">
<div class="wave"></div>
<div class="wave-mask"></div>
<div class="tips">0%</div>
</div>
<div >
<input type="number"step="5">
<button id="btn">按钮</button>
<input id="range"type="range"min="0"max="100"step="5"value="0"/> </div>
<script>
let btn = ElementById('btn')
let mask = ElementsByClassName('wave-mask')[0]
let ipt = ElementsByTagName('input')[0]
let tips = ElementsByClassName('tips')[0]
let range = ElementById('range')
let value =(100-+ipt.value)
p = value +'%'
tips.innerHTML = ipt.value +'%'
}
let value =(100-+e.target.value)
p = value +'%'
tips.innerHTML = e.target.value +'%'
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。