水波漾动 (Liquid Waves) · 特效源代码交互游乐场

实时源码编辑器 (HTML/CSS/JS) 支持 Tab 缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>水波漾动 · 独立调试版</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #040d1a;
            overflow: hidden;
            font-family: system-ui, -apple-system, sans-serif;
        }
        
        .effect-container {
            width: 100%;
            height: 100%;
            position: relative;
            background: radial-gradient(circle at center, #0a1f38 0%, #040d1a 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* 底部对齐波浪 */
        }
        
        /* 唯美国风意境文字 */
        .scenery-title {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: rgba(255, 255, 255, 0.85);
            font-size: 24px;
            font-weight: 300;
            letter-spacing: 0.5em;
            writing-mode: vertical-rl; /* 竖排古风 */
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
            z-index: 10;
            pointer-events: none;
            user-select: none;
        }

        .scenery-sub {
            font-size: 13px;
            margin-top: 15px;
            letter-spacing: 0.25em;
            color: rgba(255, 255, 255, 0.4);
            writing-mode: vertical-rl;
        }

        /* 满屏波浪容器 */
        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 220px; /* 基础高度 */
            transition: height 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: visible;
        }
        
        /* 鼠标划入全屏时，大浪高涨 */
        .effect-container:hover .wave-container {
            height: 400px;
        }
        
        /* 水波基础样式 */
        .wave {
            position: absolute;
            bottom: 0;
            left: -50%;
            width: 200%;
            height: 600px; /* 超高波浪，旋转时不会露出底边 */
            border-radius: 40%;
            transform-origin: center bottom;
        }
        
        .wave-1 {
            background: rgba(63, 126, 203, 0.15);
            animation: wave-spin 15s linear infinite;
            z-index: 1;
        }
        
        .wave-2 {
            background: rgba(73, 160, 109, 0.12);
            animation: wave-spin 20s linear infinite;
            z-index: 2;
            border-radius: 38%;
        }
        
        .wave-3 {
            background: rgba(255, 255, 255, 0.06);
            animation: wave-spin 25s linear infinite;
            z-index: 3;
            border-radius: 42%;
        }
        
        @keyframes wave-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="effect-container">
        <!-- 竖排国风意境词，极具美感 -->
        <div class="scenery-title">
            春江潮水连海平
            <div class="scenery-sub">海上明月共潮生</div>
        </div>
        
        <div class="wave-container">
            <div class="wave wave-1"></div>
            <div class="wave wave-2"></div>
            <div class="wave wave-3"></div>
        </div>
    </div>
</body>
</html>
实时渲染沙盒视窗 (Sandboxed Sandbox) 实时可交互