爱站程序员基地水波纹动效
直接上代码
通过遮罩和动画实现水位图波纹特效
可以通过输入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;}</style></head><body><div class=\"container\"><div class=\"wave\"></div><div class=\"wave-mask\"></div><div class=\"tips\">0%</div></div><div style=\"display: flex; justify-content: center; align-items: center; margin-top: 200px;\"><input type=\"number\" step=\"5\"><button style=\"margin-left: 20px;\" id=\"btn\">按钮</button><input style=\"margin-left: 40px;\" id=\"range\" type=\"range\" min=\"0\" max=\"100\" step=\"5\" value=\"0\" /></div><script>let btn = document.getElementById(\'btn\')let mask = document.getElementsByClassName(\'wave-mask\')[0]let ipt = document.getElementsByTagName(\'input\')[0]let tips = document.getElementsByClassName(\'tips\')[0]let range = document.getElementById(\'range\')btn.onclick = function(e) {let value = (100 - +ipt.value)mask.style.top = value + \'%\'tips.innerHTML = ipt.value + \'%\'}range.onchange = function(e) {let value = (100 - +e.target.value)mask.style.top = value + \'%\'tips.innerHTML = e.target.value + \'%\'}</script></body></html>
