江枫修复界面(有bog)，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

            
            <!DOCTYPE html>

/* 这个代码我调试上百遍了，就是仍有动画不正常问题，各位大佬帮忙看看怎么回事 /*

<html>
<head>
    <style>
        :root {
            --dot-colors: #ff6b6b, #ff9f43, #feca57, #2ed573, #1e90ff, #a55eea;
            --dot-size: 32px;
            --jump-height: 60px;
            --anim-duration: 1.6s;
        }

        .loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.96);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 优化后的流动文字 */
        .smooth-text {
            font-family: 'Arial Black', sans-serif;
            font-size: 3.2rem;
            margin-bottom: 2.5rem;
            background: linear-gradient(
                90deg,
                var(--dot-colors)
            );
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradient-flow 8s linear infinite;
            opacity: 0.9;
        }

        /* 物理引擎模拟容器 */
        .physics-dots {
            display: flex;
            gap: 1.8rem;
            height: calc(var(--jump-height) + var(--dot-size));
            position: relative;
        }

        /* 拟真动画圆点 */
        .physics-dot {
            width: var(--dot-size);
            height: var(--dot-size);
            border-radius: 50%;
            position: relative;
            animation: 
                physics-jump var(--anim-duration) cubic-bezier(0.28, 0.84, 0.42, 0.96) infinite,
                smooth-rotate 5.2s linear infinite;
            background: radial-gradient(
                circle at 65% 35%,
                rgba(255,255,255,0.9),
                rgba(255,255,255,0.3)
            );
            box-shadow: 0 4px 18px rgba(0,0,0,0.2);
        }

        /* 颜色核心层 */
        .physics-dot::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: conic-gradient(var(--dot-colors));
            mix-blend-mode: multiply;
            animation: color-flow 7s linear infinite;
        }

        /* 精确的动画相位控制 */
        .physics-dot:nth-child(1) { animation-delay: -0.15s; }
        .physics-dot:nth-child(2) { animation-delay: -0.30s; }
        .physics-dot:nth-child(3) { animation-delay: -0.45s; }
        .physics-dot:nth-child(4) { animation-delay: -0.60s; }
        .physics-dot:nth-child(5) { animation-delay: -0.75s; }
        .physics-dot:nth-child(6) { animation-delay: -0.90s; }

        /* 关键帧动画系统 */
        @keyframes gradient-flow {
            0% { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }

        @keyframes physics-jump {
            0%, 100% { 
                transform: translateY(0) scale(1);
                animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
            }
            45% {
                transform: translateY(calc(-1 * var(--jump-height))) scale(1.15);
                animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
            }
            55% {
                transform: translateY(calc(-1 * var(--jump-height) * 0.98)) scale(1.13);
            }
        }

        @keyframes smooth-rotate {
            100% { transform: rotate(360deg); }
        }

        @keyframes color-flow {
            100% { transform: rotate(-540deg); }
        }

        /* 性能优化层 */
        .physics-dot {
            will-change: transform, opacity;
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="loader-container">
        <div class="smooth-text">江枫开发者正在修复呢</div>
        <div class="physics-dots">
            <div class="physics-dot"></div>
            <div class="physics-dot"></div>
            <div class="physics-dot"></div>
            <div class="physics-dot"></div>
            <div class="physics-dot"></div>
            <div class="physics-dot"></div>
        </div>
    </div>
</body>
</html>