399 lines
4.6 KiB
Plaintext
399 lines
4.6 KiB
Plaintext
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
min-height: 100vh;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
background: linear-gradient(135deg, #0c2461, #1e3799);
|
|
|
|
font-family: 'Arial', sans-serif;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
position: relative;
|
|
|
|
width: 600px;
|
|
|
|
height: 400px;
|
|
|
|
}
|
|
|
|
/* 文字样式 */
|
|
|
|
.text {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
font-size: 5rem;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #ffffff;
|
|
|
|
text-align: center;
|
|
|
|
z-index: 10;
|
|
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
}
|
|
|
|
/* 圆弧容器 */
|
|
|
|
.arc-container {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 400px;
|
|
|
|
height: 400px;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
/* 圆弧路径 */
|
|
|
|
.arc-path {
|
|
|
|
fill: none;
|
|
|
|
stroke: none;
|
|
|
|
}
|
|
|
|
/* 水波遮罩（会沿着圆弧移动） */
|
|
|
|
.water-mask {
|
|
|
|
fill: url(#water-gradient);
|
|
|
|
filter: url(#water-wave-filter);
|
|
|
|
opacity: 0;
|
|
|
|
animation: water-rise 4s ease-in-out infinite;
|
|
|
|
}
|
|
|
|
/* 水波上升动画 */
|
|
|
|
@keyframes water-rise {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(100%);
|
|
|
|
}
|
|
|
|
30% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
70% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(-100%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* 装饰性圆弧线 */
|
|
|
|
.guide-line {
|
|
|
|
fill: none;
|
|
|
|
stroke: rgba(255, 255, 255, 0.2);
|
|
|
|
stroke-width: 1;
|
|
|
|
stroke-dasharray: 5, 5;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="text">WATER WAVE</div>
|
|
|
|
|
|
|
|
<!-- SVG 圆弧水波 -->
|
|
|
|
<svg class="arc-container" viewBox="0 0 400 400">
|
|
|
|
<!-- 定义水波滤镜 -->
|
|
|
|
<defs>
|
|
|
|
<!-- 水波扭曲滤镜 -->
|
|
|
|
<filter id="water-wave-filter" x="-20%" y="-20%" width="140%" height="140%">
|
|
|
|
<feTurbulence
|
|
|
|
type="fractalNoise"
|
|
|
|
baseFrequency="0.01 0.03"
|
|
|
|
numOctaves="2"
|
|
|
|
seed="1"
|
|
|
|
result="turbulence"
|
|
|
|
>
|
|
|
|
<animate
|
|
|
|
attributeName="baseFrequency"
|
|
|
|
dur="3s"
|
|
|
|
values="0.01 0.03;0.02 0.04;0.01 0.03"
|
|
|
|
repeatCount="indefinite"
|
|
|
|
/>
|
|
|
|
</feTurbulence>
|
|
|
|
|
|
|
|
<feDisplacementMap
|
|
|
|
in="SourceGraphic"
|
|
|
|
in2="turbulence"
|
|
|
|
scale="15"
|
|
|
|
xChannelSelector="R"
|
|
|
|
yChannelSelector="G"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<feGaussianBlur stdDeviation="1" />
|
|
|
|
|
|
|
|
<!-- 高光效果 -->
|
|
|
|
<feSpecularLighting
|
|
|
|
surfaceScale="3"
|
|
|
|
specularConstant="0.8"
|
|
|
|
specularExponent="10"
|
|
|
|
lighting-color="#ffffff"
|
|
|
|
result="specular"
|
|
|
|
>
|
|
|
|
<fePointLight x="200" y="-100" z="200"/>
|
|
|
|
</feSpecularLighting>
|
|
|
|
|
|
|
|
<feComposite
|
|
|
|
in="specular"
|
|
|
|
in2="SourceGraphic"
|
|
|
|
operator="in"
|
|
|
|
result="highlight"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<feBlend mode="screen" in="SourceGraphic" in2="highlight"/>
|
|
|
|
</filter>
|
|
|
|
|
|
|
|
<!-- 水波渐变 -->
|
|
|
|
<linearGradient id="water-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
|
|
<stop offset="0%" stop-color="#00b4d8" stop-opacity="0.8" />
|
|
|
|
<stop offset="50%" stop-color="#0077b6" stop-opacity="0.6" />
|
|
|
|
<stop offset="100%" stop-color="#0096c7" stop-opacity="0.4" />
|
|
|
|
</linearGradient>
|
|
|
|
|
|
|
|
<!-- 圆弧遮罩 -->
|
|
|
|
<mask id="arc-mask">
|
|
|
|
<path
|
|
|
|
class="arc-path"
|
|
|
|
d="M 100,200 A 100,100 0 0,1 300,200"
|
|
|
|
stroke="white"
|
|
|
|
stroke-width="50"
|
|
|
|
stroke-linecap="round"
|
|
|
|
/>
|
|
|
|
</mask>
|
|
|
|
</defs>
|
|
|
|
|
|
|
|
<!-- 参考圆弧线 -->
|
|
|
|
<path
|
|
|
|
class="guide-line"
|
|
|
|
d="M 100,200 A 100,100 0 0,1 300,200"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 水波区域（应用遮罩和滤镜） -->
|
|
|
|
<g mask="url(#arc-mask)">
|
|
|
|
<!-- 主要水波 -->
|
|
|
|
<rect
|
|
|
|
class="water-mask"
|
|
|
|
x="50"
|
|
|
|
y="0"
|
|
|
|
width="300"
|
|
|
|
height="400"
|
|
|
|
transform="rotate(-10 200 200)"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 辅助水波（延迟） -->
|
|
|
|
<rect
|
|
|
|
class="water-mask"
|
|
|
|
x="50"
|
|
|
|
y="0"
|
|
|
|
width="300"
|
|
|
|
height="400"
|
|
|
|
transform="rotate(-10 200 200)"
|
|
|
|
style="animation-delay: 1s;"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 第三个水波 -->
|
|
|
|
<rect
|
|
|
|
class="water-mask"
|
|
|
|
x="50"
|
|
|
|
y="0"
|
|
|
|
width="300"
|
|
|
|
height="400"
|
|
|
|
transform="rotate(-10 200 200)"
|
|
|
|
style="animation-delay: 2s;"
|
|
|
|
/>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |