108 lines
3.7 KiB
HTML
108 lines
3.7 KiB
HTML
|
<!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>
|