css⽂字背景波浪，背景⽔波浪，动态波浪效果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 align centertext-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;
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>
效果图如下：

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