css 文字背景波浪，背景水波浪，动态波浪效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>波浪背景</title><style>.box{width: 300px;height: 300px;border: 1px solid gray;margin: 0 auto;}.text-wave{margin-bottom: 20px;text-align: center;line-height: 300px;font-size: 60px;background: url('./wave.png') repeat-x ;background-size: 100% 50%;animation: wave-text 3s infinite linear;color: transparent;-moz-background-clip: text;-o-background-clip: text;-webkit-background-clip: text;background-clip: text;text-shadow: 0px 0px rgba(0, 0, 0, 0.1);opacity: 1;}@keyframes wave-text {0% {background-position: 0 bottom;}100% {background-position: 200px bottom;}}.background-wave{border-radius: 50%;overflow:hidden;position: relative;animation: backgroud-wave linear infinite;}.background-wave1{position: absolute;top: 40%;left: -25%;background: #05cbe7;opacity: .8;width: 200%;height: 200%;border-radius: 40%;animation: inherit;animation-duration: 5s;}.background-wave2{position: absolute;top: 50%;left: -35%;background: #05cbe7;opacity: .5;width: 200%;height: 200%;border-radius: 36%;animation: inherit;animation-duration: 8s;}.background-wave3{position: absolute;top: 50%;left: -35%;background: #05cbe7;opacity: .3;width: 200%;height: 200%;border-radius: 30%;animation: inherit;animation-duration: 15s;}@keyframes backgroud-wave {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);} }</style></head><body><div class="box text-wave">波浪效果</div><div class="box background-wave"><div class="background-wave1"></div><div class="background-wave2"></div><div class="background-wave3"></div></div></body></html>
效果图如下：
