{"html":"

\n","css":".html,\n.body,\n.legos {\n height: 100%;\n width: 100%;\n margin: 0;\n}\n\n.legos {\n position: relative;\n left: 0;\n top: 0;\n overflow: hidden;\n}\n\n.lego {\n position: absolute;\n height: 155px;\n width: 268px;\n transform: rotate(-23deg);\n background-size:\n 72% 46%,\n 100% 45%,\n 92% 56%;\n background-position:\n 70px 0px,\n 0 0,\n 18px 100%;\n background-repeat: no-repeat;\n}\n\n.lego:before {\n content: \"\";\n position: absolute;\n border-radius: 40%;\n height: 18px;\n width: 37px;\n left: 26px;\n top: -9px;\n transform: rotate(23deg);\n}\n\n.lego:after {\n content: \"\";\n position: absolute;\n height: 82px;\n width: 88px;\n transform: rotate(51deg) skew(28deg);\n left: -35px;\n top: 37px;\n}\n\n.blue {\n top: calc(50% - 15px);\n left: calc(50% - 140px);\n z-index: 1;\n animation: blue-move 10s infinite linear;\n background-image: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0) 95%,\n rgba(110, 187, 255, 0.4) 98%,\n rgba(255, 255, 255, 0) 100%\n ),\n linear-gradient(52deg, #1e88e5 82%, rgba(255, 255, 255, 0) 82%),\n linear-gradient(113deg, #1e88e5 87%, rgba(0, 0, 0, 0) 86%);\n}\n\n.blue:before {\n background: #2093f7;\n box-shadow:\n 0px 10px 0px #1d6bb2,\n 0px 5px 0px #1d6bb2,\n 50px -20px 0px #2093f7,\n 50px -10px 0px #1d6bb2,\n 50px -15px 0px #1d6bb2,\n 100px -40px 0px #2093f7,\n 100px -30px 0px #1d6bb2,\n 100px -35px 0px #1d6bb2,\n 150px -60px 0px #2093f7,\n 150px -50px 0px #1d6bb2,\n 150px -55px 0px #1d6bb2,\n 40px 20px 0px #2093f7,\n 40px 25px 0px #1d6bb2,\n 40px 30px 0px #1d6bb2,\n 90px 0px 0px #2093f7,\n 90px 5px 0px #1d6bb2,\n 90px 10px 0px #1d6bb2,\n 140px -20px 0px #2093f7,\n 140px -15px 0px #1d6bb2,\n 140px -10px 0px #1d6bb2,\n 190px -40px 0px #2093f7,\n 190px -35px 0px #1d6bb2,\n 190px -30px 0px #1d6bb2;\n}\n\n.blue:after {\n background: #1d6bb2;\n}\n\n@keyframes blue-move {\n 0% {\n top: calc(50% - 15px);\n left: calc(50% - 140px);\n z-index: 1;\n }\n 3.334% {\n top: calc(50% + 100px);\n }\n 6.668% {\n left: calc(50% + 180px);\n }\n 10% {\n left: calc(50% + 180px);\n top: calc(50% - 290px);\n }\n 13.336% {\n top: calc(50% - 290px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n 16.67% {\n top: calc(50% - 202px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n 33.337% {\n top: calc(50% - 134px);\n left: calc(50% - 78px);\n z-index: 2;\n }\n 50% {\n top: calc(50% - 15px);\n left: calc(50% - 78px);\n z-index: 1;\n }\n 53.334% {\n top: calc(50% + 100px);\n }\n 56.668% {\n left: calc(50% - 400px);\n }\n 60% {\n left: calc(50% - 200px);\n top: calc(50% - 290px);\n }\n 63.336% {\n top: calc(50% - 290px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n 66.68% {\n top: calc(50% - 202px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n 83.35% {\n top: calc(50% - 83px);\n left: calc(50% - 137px);\n z-index: 2;\n }\n}\n\n.red {\n top: calc(50% - 134px);\n left: calc(50% - 78px);\n z-index: 2;\n animation: red-move 10s infinite linear;\n background-image: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0) 95%,\n rgba(248, 135, 127, 0.4) 98%,\n rgba(255, 255, 255, 0) 100%\n ),\n linear-gradient(52deg, #f44336 82%, rgba(0, 0, 0, 0) 82%),\n linear-gradient(113deg, #f44336 87%, rgba(0, 0, 0, 0) 86%);\n}\n\n.red:before {\n background: #f36359;\n box-shadow:\n 0px 10px 0px #db3327,\n 0px 5px 0px #db3327,\n 50px -20px 0px #f36359,\n 50px -10px 0px #db3327,\n 50px -15px 0px #db3327,\n 100px -40px 0px #f36359,\n 100px -30px 0px #db3327,\n 100px -35px 0px #db3327,\n 150px -60px 0px #f36359,\n 150px -50px 0px #db3327,\n 150px -55px 0px #db3327,\n 40px 20px 0px #f36359,\n 40px 25px 0px #db3327,\n 40px 30px 0px #db3327,\n 90px 0px 0px #f36359,\n 90px 5px 0px #db3327,\n 90px 10px 0px #db3327,\n 140px -20px 0px #f36359,\n 140px -15px 0px #db3327,\n 140px -10px 0px #db3327,\n 190px -40px 0px #f36359,\n 190px -35px 0px #db3327,\n 190px -30px 0px #db3327;\n}\n\n.red:after {\n background: #db3327;\n}\n\n@keyframes red-move {\n 0% {\n top: calc(50% - 134px);\n left: calc(50% - 78px);\n z-index: 2;\n }\n 16.67% {\n top: calc(50% - 15px);\n left: calc(50% - 78px);\n z-index: 1;\n }\n 20% {\n top: calc(50% + 100px);\n }\n 23.338% {\n left: calc(50% - 400px);\n }\n 26.672% {\n left: calc(50% - 200px);\n top: calc(50% - 290px);\n }\n 30% {\n top: calc(50% - 290px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n 33.337% {\n top: calc(50% - 202px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n 50% {\n top: calc(50% - 83px);\n left: calc(50% - 137px);\n z-index: 2;\n }\n 66.68% {\n top: calc(50% - 15px);\n left: calc(50% - 140px);\n z-index: 1;\n }\n 70.014% {\n top: calc(50% + 100px);\n }\n 73.348% {\n left: calc(50% + 168px);\n }\n 76.68% {\n left: calc(50% + 168px);\n top: calc(50% - 290px);\n }\n 80.016% {\n top: calc(50% - 290px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n 83.35% {\n top: calc(50% - 202px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n}\n\n.yellow {\n top: calc(50% - 202px);\n left: calc(50% - 140px);\n z-index: 3;\n animation: yellow-move 10s infinite linear;\n background-image: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0) 95%,\n #ffe884 98%,\n #ffe884 98%,\n rgba(255, 255, 255, 0) 100%\n ),\n linear-gradient(52deg, #fdd835 82%, rgba(0, 0, 0, 0) 82%),\n linear-gradient(113deg, #fdd835 87%, rgba(0, 0, 0, 0) 86%);\n}\n\n.yellow:before {\n background: #ffe884;\n box-shadow:\n 0px 10px 0px #e9c72f,\n 0px 5px 0px #e9c72f,\n 50px -20px 0px #ffe884,\n 50px -10px 0px #e9c72f,\n 50px -15px 0px #e9c72f,\n 100px -40px 0px #ffe884,\n 100px -30px 0px #e9c72f,\n 100px -35px 0px #e9c72f,\n 150px -60px 0px #ffe884,\n 150px -50px 0px #e9c72f,\n 150px -55px 0px #e9c72f,\n 40px 20px 0px #ffe884,\n 40px 25px 0px #e9c72f,\n 40px 30px 0px #e9c72f,\n 90px 0px 0px #ffe884,\n 90px 5px 0px #e9c72f,\n 90px 10px 0px #e9c72f,\n 140px -20px 0px #ffe884,\n 140px -15px 0px #e9c72f,\n 140px -10px 0px #e9c72f,\n 190px -40px 0px #ffe884,\n 190px -35px 0px #e9c72f,\n 190px -30px 0px #e9c72f;\n}\n\n.yellow:after {\n background: #e9c72f;\n}\n\n@keyframes yellow-move {\n 0% {\n top: calc(50% - 202px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n 16.67% {\n top: calc(50% - 83px);\n left: calc(50% - 137px);\n z-index: 2;\n }\n 33.337% {\n top: calc(50% - 15px);\n left: calc(50% - 140px);\n z-index: 1;\n }\n 36.671% {\n top: calc(50% + 100px);\n }\n 40% {\n left: calc(50% + 168px);\n }\n 43.339% {\n left: calc(50% + 168px);\n top: calc(50% - 290px);\n }\n 46.673% {\n top: calc(50% - 290px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n 50% {\n top: calc(50% - 202px);\n left: calc(50% - 78px);\n z-index: 3;\n }\n 66.68% {\n top: calc(50% - 134px);\n left: calc(50% - 78px);\n z-index: 2;\n }\n 83.35% {\n top: calc(50% - 15px);\n left: calc(50% - 78px);\n z-index: 1;\n }\n 86.684% {\n top: calc(50% + 100px);\n }\n 90.018% {\n left: calc(50% - 400px);\n }\n 93.352% {\n left: calc(50% - 200px);\n top: calc(50% - 290px);\n z-index: 1;\n }\n 96.686% {\n top: calc(50% - 290px);\n left: calc(50% - 140px);\n z-index: 3;\n }\n}\n"}

ancient-frog-16

👁 实时预览

📝 源代码