{"html":"

\n","css":"#steve {\n scale: 0.5;\n width: 400px;\n height: 400px;\n display: grid;\n grid-template-columns: repeat(8, 50px);\n grid-template-rows: repeat(8, 50px);\n grid-auto-flow: row;\n grid-template-areas:\n \"a1 a2 a3 a4 a5 a6 a7 a8\"\n \"b1 b2 b3 b4 b5 b6 b7 b8\"\n \"c1 c2 c3 c4 c5 c6 c7 c8\"\n \"d1 d2 d3 d4 d5 d6 d7 d8\"\n \"e1 e2 e3 e4 e5 e6 e7 e8\"\n \"f1 f2 f3 f4 f5 f6 f7 f8\"\n \"g1 g2 g3 g4 g5 g6 g7 g8\"\n \"h1 h2 h3 h4 h5 h6 h7 h8\";\n}\n\n#steve div {\n overflow: hidden;\n position: relative;\n}\n\n#div1 {\n grid-area: a1;\n background-color: #2f200d;\n}\n#div2 {\n grid-area: a2;\n background-color: #2b1e0d;\n}\n#div3 {\n grid-area: a3;\n background-color: #2f1f0f;\n}\n#div4 {\n grid-area: a4;\n background-color: #281c0b;\n}\n#div5 {\n grid-area: a5;\n background-color: #241808;\n}\n#div6 {\n grid-area: a6;\n background-color: #261a0a;\n}\n#div7 {\n grid-area: a7;\n background-color: #2b1e0d;\n}\n#div8 {\n grid-area: a8;\n background-color: #2a1d0d;\n}\n\n#div9 {\n grid-area: b1;\n background-color: #2b1e0d;\n}\n#div10 {\n grid-area: b2;\n background-color: #2b1e0d;\n}\n#div11 {\n grid-area: b3;\n background-color: #2b1e0d;\n}\n#div12 {\n grid-area: b4;\n background-color: #332411;\n}\n#div13 {\n grid-area: b5;\n background-color: #422a12;\n}\n#div14 {\n grid-area: b6;\n background-color: #3f2a15;\n}\n#div15 {\n grid-area: b7;\n background-color: #2c1e0e;\n}\n#div16 {\n grid-area: b8;\n background-color: #281c0b;\n}\n\n#div17 {\n grid-area: c1;\n background-color: #2b1e0d;\n}\n#div18 {\n grid-area: c2;\n background-color: #b6896c;\n}\n#div19 {\n grid-area: c3;\n background-color: #bd8e72;\n}\n#div20 {\n grid-area: c4;\n background-color: #c69680;\n}\n#div21 {\n grid-area: c5;\n background-color: #bd8b72;\n}\n#div22 {\n grid-area: c6;\n background-color: #bd8e74;\n}\n#div23 {\n grid-area: c7;\n background-color: #ac765a;\n}\n#div24 {\n grid-area: c8;\n background-color: #342512;\n}\n\n#div25 {\n grid-area: d1;\n background-color: #aa7d66;\n}\n#div26 {\n grid-area: d2;\n background-color: #b4846d;\n}\n#div27 {\n grid-area: d3;\n background-color: #aa7d66;\n}\n#div28 {\n grid-area: d4;\n background-color: #ad806d;\n}\n#div29 {\n grid-area: d5;\n background-color: #9c725c;\n}\n#div30 {\n grid-area: d6;\n background-color: #bb8972;\n}\n#div31 {\n grid-area: d7;\n background-color: #9c694c;\n}\n#div32 {\n grid-area: d8;\n background-color: #9c694c;\n}\n\n#div33 {\n grid-area: e1;\n background-color: #b4846d;\n}\n#div34 {\n grid-area: e2;\n background-color: #ffffff;\n}\n#div35 {\n grid-area: e3;\n background-color: #523d89;\n}\n#div36 {\n grid-area: e4;\n background-color: #b57b67;\n}\n#div37 {\n grid-area: e5;\n background-color: #bb8972;\n}\n#div38 {\n grid-area: e6;\n background-color: #523d89;\n}\n#div39 {\n grid-area: e7;\n background-color: #ffffff;\n}\n#div40 {\n grid-area: e8;\n background-color: #aa7d66;\n}\n\n#div41 {\n grid-area: f1;\n background-color: #9c6346;\n}\n#div42 {\n grid-area: f2;\n background-color: #b37b62;\n}\n#div43 {\n grid-area: f3;\n background-color: #b78272;\n}\n#div44 {\n grid-area: f4;\n background-color: #6a4030;\n}\n#div45 {\n grid-area: f5;\n background-color: #6a4030;\n}\n#div46 {\n grid-area: f6;\n background-color: #be886c;\n}\n#div47 {\n grid-area: f7;\n background-color: #a26a47;\n}\n#div48 {\n grid-area: f8;\n background-color: #805334;\n}\n\n#div49 {\n grid-area: g1;\n background-color: #905e43;\n}\n#div50 {\n grid-area: g2;\n background-color: #965f40;\n}\n#div51 {\n grid-area: g3;\n background-color: #41210c;\n}\n#div52 {\n grid-area: g4;\n background-color: #8a4c3d;\n}\n#div53 {\n grid-area: g5;\n background-color: #8a4c3d;\n}\n#div54 {\n grid-area: g6;\n background-color: #45220e;\n}\n#div55 {\n grid-area: g7;\n background-color: #8f5e3e;\n}\n#div56 {\n grid-area: g8;\n background-color: #815339;\n}\n\n#div57 {\n grid-area: h1;\n background-color: #6f452c;\n}\n#div58 {\n grid-area: h2;\n background-color: #6d432a;\n}\n#div59 {\n grid-area: h3;\n background-color: #41210c;\n}\n#div60 {\n grid-area: h4;\n background-color: #421d0a;\n}\n#div61 {\n grid-area: h5;\n background-color: #45220e;\n}\n#div62 {\n grid-area: h6;\n background-color: #45220e;\n}\n#div63 {\n grid-area: h7;\n background-color: #83553b;\n}\n#div64 {\n grid-area: h8;\n background-color: #7a4e33;\n}\n\n#steve ::before {\n content: \"\";\n background-color: gray;\n width: 50px;\n height: 50px;\n position: absolute;\n top: -50px;\n}\n\n#div34::after,\n#div35::after,\n#div38::after,\n#div39::after {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: #a17661;\n z-index: 1;\n top: -50px;\n animation: winking 6s ease-in-out infinite 2s;\n}\n\n@keyframes winking {\n 0% {\n transform: translateY(0px);\n }\n 40% {\n transform: translateY(0px);\n }\n 45% {\n transform: translateY(50px);\n }\n 48% {\n transform: translateY(50px);\n }\n 53% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n\n#div1::before {\n background-color: #a1a1a1;\n animation: change 6s ease-in-out infinite;\n}\n#div2::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.01s;\n}\n#div3::before {\n background-color: #a3a3a3;\n animation: change 6s ease-in-out infinite 0.02s;\n}\n#div4::before {\n background-color: #919191;\n animation: change 6s ease-in-out infinite 0.03s;\n}\n#div5::before {\n background-color: #888888;\n animation: change 6s ease-in-out infinite 0.04s;\n}\n#div6::before {\n background-color: #8f8f8f;\n animation: change 6s ease-in-out infinite 0.05s;\n}\n#div7::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.06s;\n}\n#div8::before {\n background-color: #989898;\n animation: change 6s ease-in-out infinite 0.07s;\n}\n\n#div9::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.08s;\n}\n#div10::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.09s;\n}\n#div11::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.1s;\n}\n#div12::before {\n background-color: #aaaaaa;\n animation: change 6s ease-in-out infinite 0.11s;\n}\n#div13::before {\n background-color: #c1c1c1;\n animation: change 6s ease-in-out infinite 0.12s;\n}\n#div14::before {\n background-color: #bebebe;\n animation: change 6s ease-in-out infinite 0.13s;\n}\n#div15::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.14s;\n}\n#div16::before {\n background-color: #919191;\n animation: change 6s ease-in-out infinite 0.15s;\n}\n\n#div17::before {\n background-color: #9b9b9b;\n animation: change 6s ease-in-out infinite 0.16s;\n}\n#div18::before {\n background-color: #c7c7c7;\n animation: change 6s ease-in-out infinite 0.17s;\n}\n#div19::before {\n background-color: #cacaca;\n animation: change 6s ease-in-out infinite 0.18s;\n}\n#div20::before {\n background-color: #d8d8d8;\n animation: change 6s ease-in-out infinite 0.19s;\n}\n#div21::before {\n background-color: #cfcfcf;\n animation: change 6s ease-in-out infinite 0.2s;\n}\n#div22::before {\n background-color: #cfcfcf;\n animation: change 6s ease-in-out infinite 0.21s;\n}\n#div23::before {\n background-color: #bababa;\n animation: change 6s ease-in-out infinite 0.22s;\n}\n#div24::before {\n background-color: #aaaaaa;\n animation: change 6s ease-in-out infinite 0.23s;\n}\n\n#div25::before {\n background-color: #bababa;\n animation: change 6s ease-in-out infinite 0.24s;\n}\n#div26::before {\n background-color: #c4c4c4;\n animation: change 6s ease-in-out infinite 0.25s;\n}\n#div27::before {\n background-color: #bababa;\n animation: change 6s ease-in-out infinite 0.26s;\n}\n#div28::before {\n background-color: #c1c1c1;\n animation: change 6s ease-in-out infinite 0.27s;\n}\n#div29::before {\n background-color: #afafaf;\n animation: change 6s ease-in-out infinite 0.28s;\n}\n#div30::before {\n background-color: #cacaca;\n animation: change 6s ease-in-out infinite 0.29s;\n}\n#div31::before {\n background-color: #aaaaaa;\n animation: change 6s ease-in-out infinite 0.3s;\n}\n#div32::before {\n background-color: #aaaaaa;\n animation: change 6s ease-in-out infinite 0.31s;\n}\n\n#div33::before {\n background-color: #c4c4c4;\n animation: change 6s ease-in-out infinite 0.32s;\n}\n#div34::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.33s;\n z-index: 2;\n}\n#div35::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.34s;\n z-index: 2;\n}\n#div36::before {\n background-color: #c4c4c4;\n animation: change 6s ease-in-out infinite 0.35s;\n}\n#div37::before {\n background-color: #cacaca;\n animation: change 6s ease-in-out infinite 0.36s;\n}\n#div38::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.37s;\n z-index: 2;\n}\n#div39::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.38s;\n z-index: 2;\n}\n#div40::before {\n background-color: #bababa;\n animation: change 6s ease-in-out infinite 0.39s;\n}\n\n#div41::before {\n background-color: #a7a7a7;\n animation: change 6s ease-in-out infinite 0.4s;\n}\n#div42::before {\n background-color: #c1c1c1;\n animation: change 6s ease-in-out infinite 0.41s;\n}\n#div43::before {\n background-color: #cacaca;\n animation: change 6s ease-in-out infinite 0.42s;\n}\n#div44::before {\n background-color: #828282;\n animation: change 6s ease-in-out infinite 0.43s;\n}\n#div45::before {\n background-color: #828282;\n animation: change 6s ease-in-out infinite 0.44s;\n}\n#div46::before {\n background-color: #cacaca;\n animation: change 6s ease-in-out infinite 0.45s;\n}\n#div47::before {\n background-color: #aaaaaa;\n animation: change 6s ease-in-out infinite 0.46s;\n}\n#div48::before {\n background-color: #8f8f8f;\n animation: change 6s ease-in-out infinite 0.47s;\n}\n\n#div49::before {\n background-color: #9e9e9e;\n animation: change 6s ease-in-out infinite 0.48s;\n}\n#div50::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.49s;\n}\n#div51::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.5s;\n}\n#div52::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.51s;\n}\n#div53::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.52s;\n}\n#div54::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.53s;\n}\n#div55::before {\n background-color: #494949;\n animation: change 6s ease-in-out infinite 0.54s;\n}\n#div56::before {\n background-color: #919191;\n animation: change 6s ease-in-out infinite 0.55s;\n}\n\n#div57::before {\n background-color: #828282;\n animation: change 6s ease-in-out infinite 0.56s;\n}\n#div58::before {\n background-color: #7f7f7f;\n animation: change 6s ease-in-out infinite 0.57s;\n}\n#div59::before {\n background-color: #858585;\n animation: change 6s ease-in-out infinite 0.58s;\n}\n#div60::before {\n background-color: #858585;\n animation: change 6s ease-in-out infinite 0.59s;\n}\n#div61::before {\n background-color: #919191;\n animation: change 6s ease-in-out infinite 0.6s;\n}\n#div62::before {\n background-color: #858585;\n animation: change 6s ease-in-out infinite 0.61s;\n}\n#div63::before {\n background-color: #949494;\n animation: change 6s ease-in-out infinite 0.62s;\n}\n#div64::before {\n background-color: #888888;\n animation: change 6s ease-in-out infinite 0.63s;\n}\n\n@keyframes change {\n 0% {\n transform: translateY(0px);\n }\n 5% {\n transform: translateY(50px);\n }\n 50% {\n transform: translateY(50px);\n }\n 55% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n"}

brave-kangaroo-92

👁 实时预览

📝 源代码