{"html":"

\n","css":"@keyframes dropAndShift {\n 0% {\n transform: translate(0px, 15px);\n }\n 16.67% {\n transform: translate(80px, 13px);\n }\n 33.34% {\n transform: translate(40px, 10px);\n }\n 50.01% {\n transform: translate(40px, -30px);\n }\n 66.68% {\n transform: translate(40px, 55px);\n }\n 83.35% {\n transform: translate(40px, 10px);\n }\n 100% {\n transform: translate(0px, 15px);\n }\n}\n@keyframes bubbleGlint {\n 0% {\n top: 3px;\n left: 4px;\n opacity: 0;\n }\n 8.335% {\n top: 6px;\n left: 6px;\n opacity: 0.5;\n }\n 16.67% {\n top: 3px;\n left: 4px;\n opacity: 0;\n }\n 33.34% {\n top: 3px;\n left: 4px;\n opacity: 0.5;\n }\n 50.01% {\n top: 3px;\n left: 4px;\n opacity: 0;\n }\n 58.345% {\n top: 6px;\n left: 6px;\n opacity: 0.5;\n }\n 66.68% {\n top: 3px;\n left: 4px;\n opacity: 0;\n }\n 83.35% {\n top: 6px;\n left: 6px;\n opacity: 0.5;\n }\n 100% {\n top: 3px;\n left: 4px;\n opacity: 0;\n }\n}\n\n.Strich1 {\n position: absolute;\n width: 130px;\n height: 50px;\n background: #000;\n border-radius: 25px;\n transform: rotate(45deg);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);\n z-index: 0;\n}\n.Strich2 {\n position: absolute;\n width: 130px;\n height: 50px;\n background: #000;\n border-radius: 25px;\n transform: rotate(-90deg);\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);\n z-index: 0;\n}\n\n.bubble {\n position: absolute;\n top: 0;\n left: 15px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #ffb3c1, #e64980, #ff8787);\n animation: dropAndShift 5s ease-in-out infinite;\n z-index: 1;\n}\n\n.bubble1 {\n position: absolute;\n top: 0;\n width: 20px;\n height: 20px;\n background: radial-gradient(circle at 30% 30%, #edb3ff, #ac49e6, #fb87ff);\n border-radius: 50%;\n left: 8px;\n animation: dropAndShift 6s ease-in-out infinite;\n z-index: 2;\n}\n.bubble2 {\n position: absolute;\n top: 0;\n width: 20px;\n height: 20px;\n background: radial-gradient(circle at 30% 30%, #b3d8ff, #4963e6, #87a7ff);\n border-radius: 50%;\n left: 12px;\n animation: dropAndShift 4s ease-in-out infinite;\n z-index: 3;\n}\n.bubble3 {\n position: absolute;\n top: 0;\n width: 20px;\n height: 20px;\n background: radial-gradient(circle at 30% 30%, #b3ffbc, #35a32f, #75ba61);\n border-radius: 50%;\n left: 10px;\n animation: dropAndShift 7s ease-in-out infinite;\n z-index: 4;\n}\n"}

massive-falcon-52

👁 实时预览

📝 源代码