221 lines
2.6 KiB
Plaintext
221 lines
2.6 KiB
Plaintext
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<style>
|
|
|
|
.water-text {
|
|
|
|
font-size: 5rem;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #00b4d8;
|
|
|
|
filter: url(#water-filter);
|
|
|
|
text-shadow:
|
|
|
|
0 2px 4px rgba(0, 180, 216, 0.3),
|
|
|
|
0 4px 8px rgba(0, 180, 216, 0.2);
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 100vh;
|
|
|
|
background: linear-gradient(to bottom, #03045e, #0077b6);
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="water-text">WATER WAVE</div>
|
|
|
|
</div>
|
|
|
|
<svg style="position: absolute; width: 0; height: 0;">
|
|
|
|
<defs>
|
|
|
|
<!-- 主水波滤镜 -->
|
|
|
|
<filter id="water-filter">
|
|
|
|
<!-- 基础水波纹 -->
|
|
|
|
<feTurbulence
|
|
|
|
type="fractalNoise"
|
|
|
|
baseFrequency="0.01 0.03"
|
|
|
|
numOctaves="3"
|
|
|
|
seed="2"
|
|
|
|
result="water"
|
|
|
|
>
|
|
|
|
<animate
|
|
|
|
attributeName="baseFrequency"
|
|
|
|
dur="10s"
|
|
|
|
values="0.01 0.03;0.02 0.04;0.01 0.03"
|
|
|
|
repeatCount="indefinite"
|
|
|
|
/>
|
|
|
|
</feTurbulence>
|
|
|
|
|
|
|
|
<!-- 扭曲置换 -->
|
|
|
|
<feDisplacementMap
|
|
|
|
in="SourceGraphic"
|
|
|
|
in2="water"
|
|
|
|
scale="10"
|
|
|
|
xChannelSelector="R"
|
|
|
|
yChannelSelector="G"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 高斯模糊模拟水模糊 -->
|
|
|
|
<feGaussianBlur stdDeviation="0.5" />
|
|
|
|
|
|
|
|
<!-- 颜色调整模拟水下效果 -->
|
|
|
|
<feColorMatrix
|
|
|
|
type="matrix"
|
|
|
|
values="1 0 0 0 0
|
|
|
|
0 1 0 0 0.1
|
|
|
|
0 0 1 0 0.2
|
|
|
|
0 0 0 1 0"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- 添加高光反射 -->
|
|
|
|
<feSpecularLighting
|
|
|
|
surfaceScale="5"
|
|
|
|
specularConstant="1"
|
|
|
|
specularExponent="20"
|
|
|
|
lighting-color="#ffffff"
|
|
|
|
result="specular"
|
|
|
|
>
|
|
|
|
<fePointLight x="0" y="100" z="200"/>
|
|
|
|
</feSpecularLighting>
|
|
|
|
|
|
|
|
<!-- 混合高光 -->
|
|
|
|
<feBlend mode="screen" in="specular" in2="SourceGraphic"/>
|
|
|
|
</filter>
|
|
|
|
|
|
|
|
<!-- 简单水波滤镜（性能更好） -->
|
|
|
|
<filter id="simple-water-filter">
|
|
|
|
<feTurbulence
|
|
|
|
id="turbulence"
|
|
|
|
type="fractalNoise"
|
|
|
|
baseFrequency="0.015 0.025"
|
|
|
|
numOctaves="2"
|
|
|
|
result="noise"
|
|
|
|
>
|
|
|
|
<animate
|
|
|
|
attributeName="baseFrequency"
|
|
|
|
dur="8s"
|
|
|
|
values="0.015 0.025;0.02 0.03;0.015 0.025"
|
|
|
|
repeatCount="indefinite"
|
|
|
|
/>
|
|
|
|
</feTurbulence>
|
|
|
|
|
|
|
|
<feDisplacementMap
|
|
|
|
in="SourceGraphic"
|
|
|
|
in2="noise"
|
|
|
|
scale="8"
|
|
|
|
xChannelSelector="R"
|
|
|
|
yChannelSelector="G"
|
|
|
|
/>
|
|
|
|
</filter>
|
|
|
|
</defs>
|
|
|
|
</svg>
|
|
|
|
</body>
|
|
|
|
</html> |