{"html":"

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".ocean-scene-pro {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom, #1e3a8a, #0c4a6e, #111827);\n overflow: hidden; /* Crucial for the effect to work */\n border-radius: 1vmax;\n border: 3px solid #a8dadc;\n box-shadow: 0 0 3vmax rgba(168, 218, 220, 0.3);\n}\n.light-caustics {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n background: radial-gradient(\n ellipse 40% 50% at 20% 40%,\n rgba(255, 255, 255, 0.1),\n transparent\n ),\n radial-gradient(\n ellipse 30% 40% at 80% 70%,\n rgba(255, 255, 255, 0.08),\n transparent\n );\n animation: caustics-flow 20s linear infinite;\n}\n.sand-floor {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 8vmax;\n background: #c2b280;\n border-radius: 50% 40% 0 0 / 10vmax 12vmax 0 0;\n z-index: 1;\n}\n.seaweed {\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n z-index: 2;\n}\n.seaweed__plant {\n position: absolute;\n bottom: 3vmax;\n width: 1vmax;\n background: linear-gradient(to top, #004d40, #00796b);\n border-radius: 0.5vmax;\n transform-origin: bottom center;\n animation: seaweed-sway 10s ease-in-out infinite;\n}\n.seaweed__plant--1 {\n left: 10%;\n height: 15vmax;\n animation-delay: -2s;\n}\n.seaweed__plant--2 {\n left: 80%;\n height: 20vmax;\n animation-delay: -5s;\n transform: scaleX(-1);\n}\n.seaweed__plant--3 {\n left: 45%;\n height: 12vmax;\n animation-delay: -8s;\n}\n\n/* --- NEW: Sea Grass Styling --- */\n.sea-grass {\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n z-index: 3; /* Placed in front of seaweed but behind fish */\n}\n.grass-blade {\n position: absolute;\n bottom: 0;\n width: 0.6vmax;\n background: linear-gradient(to top, #2d6a4f, #40916c);\n border-radius: 0.5vmax 0.5vmax 0 0;\n transform-origin: bottom center;\n animation: grass-sway 7s ease-in-out infinite;\n}\n.grass-blade--1 {\n left: 20%;\n height: 6vmax;\n animation-delay: -1s;\n}\n.grass-blade--2 {\n left: 22%;\n height: 4vmax;\n animation-delay: -2.5s;\n transform: scaleX(-1);\n}\n.grass-blade--3 {\n left: 25%;\n height: 7vmax;\n animation-delay: -4s;\n}\n.grass-blade--4 {\n left: 60%;\n height: 5vmax;\n animation-delay: -1.5s;\n}\n.grass-blade--5 {\n left: 63%;\n height: 8vmax;\n animation-delay: -5s;\n}\n.grass-blade--6 {\n left: 65%;\n height: 6vmax;\n animation-delay: -3s;\n transform: scaleX(-1);\n}\n.grass-blade--7 {\n left: 90%;\n height: 4vmax;\n animation-delay: -6s;\n}\n\n/* --- NEW: More Bubbles --- */\n.bubbles {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 5;\n}\n.bubble {\n position: absolute;\n bottom: -5vmax;\n border: 0.15vmax solid rgba(255, 255, 255, 0.4);\n border-radius: 50%;\n animation: rise 15s linear infinite;\n}\n.bubble--1 {\n left: 10%;\n width: 1.5vmax;\n height: 1.5vmax;\n animation-duration: 12s;\n animation-delay: -2s;\n}\n.bubble--2 {\n left: 30%;\n width: 2.5vmax;\n height: 2.5vmax;\n animation-duration: 18s;\n animation-delay: -8s;\n}\n.bubble--3 {\n left: 55%;\n width: 1vmax;\n height: 1vmax;\n animation-duration: 10s;\n animation-delay: 0s;\n}\n.bubble--4 {\n left: 80%;\n width: 3vmax;\n height: 3vmax;\n animation-duration: 15s;\n animation-delay: -5s;\n}\n.bubble--5 {\n left: 90%;\n width: 1.2vmax;\n height: 1.2vmax;\n animation-duration: 11s;\n animation-delay: -10s;\n}\n.bubble--6 {\n left: 5%;\n width: 2vmax;\n height: 2vmax;\n animation-duration: 16s;\n animation-delay: -4s;\n}\n.bubble--7 {\n left: 40%;\n width: 1.8vmax;\n height: 1.8vmax;\n animation-duration: 20s;\n animation-delay: -1s;\n}\n.bubble--8 {\n left: 25%;\n width: 0.8vmax;\n height: 0.8vmax;\n animation-duration: 9s;\n animation-delay: -12s;\n}\n.bubble--9 {\n left: 70%;\n width: 2.2vmax;\n height: 2.2vmax;\n animation-duration: 14s;\n animation-delay: -7s;\n}\n.bubble--10 {\n left: 95%;\n width: 1.5vmax;\n height: 1.5vmax;\n animation-duration: 13s;\n animation-delay: -14s;\n}\n\n/* --- SVG Fish Styling --- */\n.fish {\n position: absolute;\n z-index: 10;\n filter: drop-shadow(0 0.2vmax 0.5vmax rgba(0, 0, 0, 0.3));\n}\n.fish--svg {\n width: 12vmax;\n height: 12vmax;\n}\n.fish--1 {\n animation: swim-path-1 20s linear infinite -2s;\n}\n.fish--2 {\n filter: hue-rotate(160deg) drop-shadow(0 0.2vmax 0.5vmax rgba(0, 0, 0, 0.3));\n transform: scale(0.8);\n animation: swim-path-2 25s linear infinite -10s;\n}\n.fish-tail {\n transform-origin: 98px 258px;\n animation: wag-tail-svg 0.8s ease-in-out infinite;\n}\n\n/* --- @keyframes Definitions --- */\n@keyframes caustics-flow {\n 0%,\n 100% {\n transform: translate(0, 0) scale(1.1);\n }\n 50% {\n transform: translate(2vmax, 5vmax) scale(1);\n }\n}\n@keyframes seaweed-sway {\n 0%,\n 100% {\n transform: rotate(5deg);\n }\n 50% {\n transform: rotate(-5deg);\n }\n}\n@keyframes grass-sway {\n 0%,\n 100% {\n transform: rotate(8deg);\n }\n 50% {\n transform: rotate(-8deg);\n }\n}\n@keyframes rise {\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 1;\n }\n 50% {\n transform: translateX(2vmax);\n }\n 100% {\n transform: translateY(-60vmax) translateX(-2vmax);\n opacity: 0;\n }\n}\n@keyframes wag-tail-svg {\n 0%,\n 100% {\n transform: rotate(15deg) skewX(10deg);\n }\n 50% {\n transform: rotate(-15deg) skewX(-10deg);\n }\n}\n@keyframes swim-path-1 {\n 0% {\n transform: translate(-20vmax, 10vmax) rotateY(0deg);\n }\n 49% {\n transform: translate(60vmax, 15vmax) rotateY(0deg);\n }\n 50% {\n transform: translate(60vmax, 15vmax) rotateY(180deg);\n }\n 99% {\n transform: translate(-20vmax, 10vmax) rotateY(180deg);\n }\n 100% {\n transform: translate(-20vmax, 10vmax) rotateY(180deg);\n }\n}\n@keyframes swim-path-2 {\n 0% {\n transform: translate(60vmax, 45vmax) rotateY(180deg) scale(0.8);\n }\n 49% {\n transform: translate(-20vmax, 40vmax) rotateY(180deg) scale(0.8);\n }\n 50% {\n transform: translate(-20vmax, 40vmax) rotateY(0deg) scale(0.8);\n }\n 99% {\n transform: translate(60vmax, 45vmax) rotateY(0deg) scale(0.8);\n }\n 100% {\n transform: translate(60vmax, 45vmax) rotateY(0deg) scale(0.8);\n }\n}\n"}

slippery-starfish-63

👁 实时预览

📝 源代码