<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双层波浪效果 - 增强版</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
overflow-x: hidden;
}
.wave-container {
position: relative;
width: 100%;
height: 220px;
background-color: #ffffff;
overflow: hidden;
}
/* 波浪底色层 */
.wave-base {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #4c7cf3 0%, #77a0ff 100%);
}
/* 波浪图案层 */
.wave-pattern {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
background-repeat: repeat-x;
background-size: 25% 100%;
animation: wave-animation 20s linear infinite;
}
/* 深色波浪 */
.wave-dark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%234c7cf3' fill-opacity='0.7' d='M0,0 L1200,0 L1200,80 C900,100 600,70 300,100 C150,110 50,90 0,80 L0,0 Z'%3E%3C/path%3E%3C/svg%3E");
z-index: 10;
animation-duration: 25s;
}
/* 浅色波浪 - 增强可见度 */
.wave-light {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%239fbcff' fill-opacity='0.85' d='M0,50 L1200,50 L1200,100 C1000,80 800,110 600,90 C400,110 200,80 0,100 L0,50 Z'%3E%3C/path%3E%3C/svg%3E");
z-index: 11; /* 提高浅色波浪的层级 */
animation-duration: 18s;
animation-direction: reverse;
top: 30px; /* 调整位置，使波浪更加明显 */
}
/* 最浅色波浪 - 增加第三层波浪增强层次感 */
.wave-lightest {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,70 L1200,70 L1200,110 C1050,90 800,105 600,95 C350,85 150,100 0,90 L0,70 Z'%3E%3C/path%3E%3C/svg%3E");
z-index: 12;
animation-duration: 15s;
top: 70px; /* 位于最上层 */
}
/* 波浪动画 */
@keyframes wave-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-25%);
}
}
.content {
max-width: 800px;
margin: 50px auto;
padding: 0 20px;
text-align: center;
}
h1 {
color: #4c7cf3;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="wave-container">
<!-- 底色渐变 -->
<div class="wave-base"></div>
<!-- 三层波浪 -->
<div class="wave-pattern wave-dark"></div>
<div class="wave-pattern wave-light"></div>
<div class="wave-pattern wave-lightest"></div>
</div>
<div class="content">
<h1>增强版双层波浪效果</h1>
<p>优化后的波浪效果，提高了浅色波浪的可见度，并添加了第三层最浅色波浪增强层次感。</p>
</div>
</body>
</html>