{"html":"

5 minutes later

\n","css":".frame {\n position: relative;\n width: 800px;\n height: 600px;\n overflow: hidden;\n\n --time: 22s;\n}\n\n.frame *,\n.frame *::before,\n.frame *::after {\n content: \"\";\n position: absolute;\n}\n\n/* SCENE 1: BOY AND NOODLE */\n.scene1 {\n width: 100%;\n height: 100%;\n}\n\n/* shadow */\n.scene1::after {\n top: 50%;\n left: 50%;\n width: 390px;\n height: 12px;\n border-radius: 50%;\n background-color: #d6c2a6;\n box-shadow:\n 0 10px #fadebd,\n 0 20px #fadebd;\n translate: -50% 170px;\n}\n\n/* body */\n.boy {\n top: 50%;\n left: 50%;\n width: 140px;\n height: 130px;\n background:\n radial-gradient(closest-side, #f78265 100%, transparent 0) center -5px / 60px\n 40px no-repeat,\n white;\n border-radius: 25px 25px 0 0;\n\n animation: boy var(--time) linear infinite;\n}\n@keyframes boy {\n 0%,\n 66.41%,\n 100% {\n translate: -50% 43px; /* 0-246 */\n }\n 66.42%,\n 91.8% {\n translate: -50% 67px; /* 246-340 */\n }\n 93.42% {\n translate: -50% 44px; /* 346 */\n }\n}\n\n/* neck */\n.boy::before {\n top: -30px;\n left: 50%;\n width: 42px;\n height: 40px;\n background-color: #f78265;\n translate: -50%;\n}\n\n.boy__head {\n top: -220px;\n left: 50%;\n width: 160px;\n height: 140px;\n background-color: #ff977b;\n box-shadow: inset 0 -4px 0 12px #715538;\n border-radius: 60px 60px 10px 10px;\n\n animation: boyHead var(--time) linear infinite;\n}\n@keyframes boyHead {\n 0%,\n 100% {\n translate: -50%; /* 0 */\n }\n 0.54% {\n translate: -50% 22px; /* 2 */\n }\n 1.08%,\n 5.4% {\n translate: -50% 31px; /* 4-8 */\n }\n 5.4%,\n 66.41% {\n translate: -50% -2px; /* 20-246 */\n }\n 66.42% {\n translate: -50% 33px; /* 246 */\n }\n 86.67% {\n translate: -50% 46px; /* 321 */\n }\n 87.75%,\n 90.99% {\n translate: -50% -2px; /* 325-337 */\n }\n 91.52% {\n translate: -50% 16px; /* 339 */\n }\n 93.42% {\n translate: -50% -3px; /* 346 */\n }\n}\n\n.boy__head::before {\n top: 60px;\n left: 50%;\n width: 190px;\n height: 155px;\n background-color: #ff977b;\n border-radius: 50%;\n\n animation: boyFace var(--time) linear infinite;\n}\n@keyframes boyFace {\n 0%,\n 100% {\n translate: -50%; /* 0 */\n }\n 0.54% {\n translate: -50% -9px; /* 2 */\n }\n 1.08%,\n 99.36% {\n translate: -50% -16px; /* 4-8 */\n }\n}\n\n/* ears */\n.boy__head::after {\n top: 78px;\n left: -45px;\n width: 50px;\n height: 50px;\n background: conic-gradient(from 270deg, #ff977b 0deg 61deg, transparent 0),\n radial-gradient(#ff977b 8px, #303083 8px 10px, #ff977b 0);\n border-radius: 100%;\n -webkit-box-reflect: right 150px; /* Firefox doesn't support this property */\n\n animation: boyEars var(--time) linear infinite;\n}\n@keyframes boyEars {\n 0%,\n 100% {\n translate: 0 0px; /* 0 */\n }\n 0.54% {\n translate: 0 -15px; /* 2 */\n }\n 1.08%,\n 99.36% {\n translate: 0 -22px; /* 4-8 */\n }\n}\n\n.boy__hair {\n top: -20px;\n left: 31px;\n width: 43px;\n height: 28px;\n background: radial-gradient(circle at 109px 60px, transparent 70%, #715537 0);\n border-radius: 90% 2px 0 0 / 100% 2px 0 0;\n}\n\n.boy__hair::before {\n top: 4px;\n left: 30px;\n width: 33px;\n height: 17px;\n background: radial-gradient(circle at 79px 49px, transparent 70%, #715537 0);\n border-radius: 90% 2px 0 0 / 100% 2px 0 0;\n}\n\n.boy__eyes {\n top: 17px;\n left: 17px;\n width: 64px;\n height: 64px;\n background: #f78569;\n border-radius: 50%;\n box-shadow: 60px 0 #f78569;\n\n animation: boyEyesPosition var(--time) linear infinite;\n}\n@keyframes boyEyesPosition {\n 0%,\n 100% {\n translate: 0 0px; /* 0 */\n }\n 0.54%,\n 99.36% {\n translate: 0 10px; /* 2 */\n }\n}\n\n.boy__eyes::before,\n.boy__eyes::after {\n width: 100%;\n height: 100%;\n background:\n linear-gradient(transparent 32px, black 0) 32px 0px / 2px 100% no-repeat,\n white;\n border-radius: 50%;\n\n animation:\n boyEyesSize var(--time) linear infinite,\n boyEyesDirection var(--time) linear infinite;\n}\n@keyframes boyEyesSize {\n 0%,\n 19.44%,\n 100% {\n scale: 1 1; /* 72 */\n }\n 19.71% {\n scale: 1 0.2; /* 73 */\n }\n 20.25%,\n 38.34% {\n scale: 1 1; /* 75-142 */\n }\n 38.88% {\n scale: 1 0.2; /* 144 */\n }\n 39.15%,\n 66.41% {\n scale: 1 1; /* 145-246 */\n }\n 66.42% {\n scale: 1 0.2; /* 246 */\n }\n 86.67% {\n scale: 1 0.05; /* 321 */\n }\n 87.21%,\n 90.99% {\n scale: 1 1; /* 323-337 */\n }\n 91.52% {\n scale: 1 0; /* 339 */\n }\n 92.07% {\n scale: 1 1; /* 341 */\n }\n}\n@keyframes boyEyesDirection {\n 0%,\n 19.44%,\n 100% {\n background-position: 32px 0px;\n }\n 19.71%,\n 39.14% {\n background-position: 32px -15px; /* 73-145 */\n }\n 39.15%,\n 66.41% {\n background-position: 32px 0px; /* 145-246 */\n }\n 66.42%,\n 91.52% {\n background-position: 32px -15px; /* 246-339 */\n }\n 92.07% {\n background-position: 32px 0px; /* 341 */\n }\n}\n\n/* left eye */\n.boy__eyes::before {\n top: 0px;\n left: 0px;\n}\n\n/* right eye */\n.boy__eyes::after {\n top: 0px;\n left: 60px;\n}\n\n.boy__mouth {\n top: 50%;\n left: 50%;\n}\n\n/* openned */\n.boy__mouth::before {\n top: 22px;\n left: 50%;\n width: 136px;\n height: 100px;\n background: #ff4559;\n border-radius: 30px 30px 70px 70px;\n box-shadow: inset -65px 50px 0 -20px #be1520;\n\n animation: mouthOpen var(--time) linear infinite;\n}\n@keyframes mouthOpen {\n 0%,\n 100% {\n translate: -50%;\n scale: 1;\n }\n 0.54%,\n 91.53% {\n translate: -50% 22px;\n scale: 0;\n }\n 94.77%,\n 95.58% {\n translate: -50%;\n scale: 0.7;\n }\n}\n\n/* closed */\n.boy__mouth::after {\n top: 79px;\n left: -28px;\n width: 49px;\n height: 30px;\n background:\n radial-gradient(\n circle at -20% 50%,\n #ff977b 8px,\n #303083 8px 10px,\n transparent 0\n )\n 10px 1px / 20px 20px no-repeat,\n radial-gradient(transparent 15px, #303083 15px 17px, transparent 0) 33px -12px\n no-repeat,\n linear-gradient(#303083, #303083) 15px 11px / 34px 2px no-repeat;\n\n animation:\n mouthClose var(--time) linear infinite,\n mouthMovement 0.7s linear infinite;\n}\n@keyframes mouthClose {\n 0%,\n 0.53%,\n 91.54%,\n 100% {\n opacity: 0; /* 0 */\n }\n 0.54%,\n 91.53% {\n opacity: 1; /* 2-339 */\n }\n\n 1.08%,\n 66.41% {\n translate: 0px -4px; /* 4-246 */\n }\n 66.42%,\n 86.67% {\n translate: 0px -30px; /* 246-321 */\n }\n 86.94%,\n 90.99% {\n translate: -7px -30px; /* 323-337 */\n }\n\n 0%,\n 1.08% {\n animation-play-state: running, paused;\n }\n 1.09%,\n 100% {\n animation-play-state: running, running;\n }\n}\n@keyframes mouthMovement {\n 0%,\n 100% {\n background-position:\n 8px 1px,\n 33px -12px,\n 15px 11px;\n }\n 25% {\n background-position:\n 12px 1px,\n 33px -12px,\n 15px 11px;\n }\n 50% {\n background-position:\n 12px 5px,\n 33px -12px,\n 15px 11px;\n }\n 75% {\n background-position:\n 8px 5px,\n 33px -12px,\n 15px 11px;\n }\n}\n\n.boy__cheeks {\n top: 96px;\n left: 6px;\n width: 20px;\n height: 20px;\n background: #ff4559;\n border-radius: 50%;\n box-shadow: 126px 0 #ff4559;\n}\n\n/* nose */\n.boy__cheeks::before {\n top: -37px;\n left: 73px;\n width: 20px;\n height: 22px;\n background: #ff977b;\n transform-origin: top right;\n rotate: 10deg;\n border-radius: 0 8px 100% 0 / 0 8px 60% 0;\n\n animation: boyNose var(--time) linear infinite;\n}\n@keyframes boyNose {\n 0%,\n 100% {\n translate: 0 0px; /* 0 */\n }\n 0.54%,\n 2.16% {\n translate: 0 10px; /* 2-8 */\n }\n 5.4%,\n 98.55% {\n translate: 0 15px; /* 20 */\n }\n}\n\n.boy__leftArm {\n top: 0px;\n left: -10px;\n width: 170px;\n height: 50px;\n background: #ff977b;\n transform-origin: 25px 25px;\n border-radius: 99em;\n box-shadow: inset 90px 0 0 -20px white;\n\n animation: boyArm var(--time) linear infinite;\n}\n@keyframes boyArm {\n 0%,\n 100% {\n rotate: 163deg; /* 0 */\n }\n 0.54%,\n 66.41% {\n rotate: 173deg; /* 2-246 */\n }\n 66.42%,\n 90.99% {\n rotate: 150deg; /* 246-337 */\n }\n 93.42%,\n 95.58% {\n rotate: 170deg; /* 346-354 */\n }\n 96.93% {\n rotate: 149deg; /* 359 */\n }\n 98.55% {\n rotate: 138deg; /* 365 */\n }\n}\n\n.boy__leftArm::before {\n top: 0px;\n left: calc(100% - 50px);\n width: 152px;\n height: 50px;\n background: inherit;\n border-radius: inherit;\n transform-origin: inherit;\n\n animation: boyArmBefore var(--time) linear infinite;\n}\n@keyframes boyArmBefore {\n 0%,\n 100% {\n rotate: 159deg; /* 0 */\n }\n 0.54%,\n 66.41% {\n rotate: 153deg; /* 2-246 */\n }\n 66.42%,\n 90.99% {\n rotate: 209deg; /* 246-337 */\n }\n 93.42%,\n 94.77% {\n rotate: 114deg; /* 346-351 */\n }\n 95.58% {\n rotate: 138deg; /* 354 */\n }\n 96.93%,\n 98.55% {\n rotate: 189deg; /* 359-365 */\n }\n}\n\n.boy__leftArm::after {\n top: 0px;\n left: calc(100% - 50px);\n width: 70px;\n height: 70px;\n background:\n radial-gradient(closest-side, #ff977b 100%, transparent 0) -25px 21px no-repeat,\n radial-gradient(\n closest-side,\n transparent calc(80% - 2px),\n #303083 calc(80% - 2px) 80%,\n #ff977b 0\n ) -8px -19px / 120% 120% no-repeat,\n radial-gradient(\n closest-side,\n #ff977b calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -23px 17px no-repeat,\n radial-gradient(\n closest-side,\n #ff977b calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -13px 5px no-repeat,\n radial-gradient(\n closest-side,\n #ff977b calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -9px -3px no-repeat,\n radial-gradient(\n closest-side,\n #ff977b calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -2px -10px no-repeat,\n #ff977b;\n border-radius: 50%;\n transform-origin: inherit;\n\n animation: boyArmAfter var(--time) linear infinite;\n}\n@keyframes boyArmAfter {\n 0%,\n 100% {\n transform: rotate(155deg) translate(95px, -4px); /* 0 */\n }\n 0.54%,\n 66.41% {\n transform: rotate(159deg) translate(95px, -18px); /* 2-246 */\n }\n 66.42%,\n 90.99% {\n transform: rotate(209deg) translate(95px, -18px); /* 246-337 */\n }\n 93.42%,\n 94.77% {\n transform: rotate(114deg) translate(100px, -8px); /* 346-351 */\n }\n 95.58% {\n transform: rotate(138deg) translate(100px, -8px); /* 354 */\n }\n 96.93%,\n 98.55% {\n transform: rotate(189deg) translate(100px, -8px); /* 359-365 */\n }\n}\n\n.chopsticks {\n top: 0px;\n left: calc(100% - 50px);\n\n animation: chopsticks var(--time) linear infinite;\n}\n@keyframes chopsticks {\n 0%,\n 100% {\n transform: rotate(155deg) translate(115px, -30px) rotate(0deg); /* 0 */\n }\n 0.54%,\n 66.41% {\n transform: rotate(159deg) translate(115px, -44px) rotate(-11deg); /* 2-246 */\n }\n 66.42%,\n 90.99% {\n transform: rotate(209deg) translate(85px, -24px) rotate(-11deg); /* 246-337 */\n }\n 93.42%,\n 94.77% {\n transform: rotate(114deg) translate(142px, -30px) rotate(64deg); /* 346-351 */\n }\n 95.58% {\n transform: rotate(138deg) translate(126px, -32px) rotate(50deg); /* 354 */\n }\n 96.93% {\n transform: rotate(189deg) translate(93px, -20px) rotate(50deg); /* 359 */\n }\n 98.55% {\n transform: rotate(183deg) translate(93px, -9px) rotate(50deg); /* 365 */\n }\n}\n\n.chopsticks::before {\n top: 0px;\n left: 0px;\n width: 160px;\n height: 6px;\n background: linear-gradient(1deg, #303083 70%, transparent 0);\n border-radius: 99em;\n translate: -50% -6px;\n transform-origin: center center;\n\n animation: chopsticksBefore var(--time) linear infinite;\n}\n@keyframes chopsticksBefore {\n 0%,\n 93.15%,\n 100% {\n rotate: 37deg; /* 0-345 */\n }\n 93.69% {\n rotate: 42deg; /* 347 */\n }\n 93.96%,\n 94.23% {\n rotate: 37deg; /* 348-349 */\n }\n 94.50% {\n rotate: 42deg; /* 350 */\n }\n 94.77% {\n rotate: 37deg; /* 351 */\n }\n}\n\n.chopsticks::after {\n top: 0px;\n left: 0px;\n width: 160px;\n height: 6px;\n background: linear-gradient(1deg, #303083 70%, transparent 0);\n border-radius: 99em;\n transform-origin: center center;\n\n animation: chopsticksAfter var(--time) linear infinite;\n}\n@keyframes chopsticksAfter {\n 0%,\n 90.99%,\n 100% {\n /* 0-337 */\n translate: calc(-50% - 3px) -1px;\n rotate: 34deg;\n }\n 93.42% {\n /* 346 */\n translate: calc(-50% - 3px) 5px;\n rotate: 36deg;\n }\n}\n\n.plate {\n top: 50%;\n left: 50%;\n width: 70px;\n height: 6px;\n background-color: #202465;\n border-radius: 6px 6px 0 0;\n translate: -50% 170px;\n z-index: 1;\n}\n\n.plate::after {\n top: -55px;\n left: 50%;\n width: 125px;\n height: 55px;\n background:\n linear-gradient(\n 180deg,\n white 1px,\n transparent 1px 14px,\n white 14px 15px,\n transparent 0\n )\n 0 10px,\n #303083;\n border-radius: 0 0 35px 35px / 0 0 50px 50px;\n translate: -50%;\n}\n\n.noodle {\n top: -28px;\n left: 50%;\n\n animation:\n noodle var(--time) linear infinite,\n noodleLength var(--time) linear infinite;\n}\n@keyframes noodle {\n 0%,\n 1.08%,\n 100% {\n translate: -50%; /* 0-8 */\n }\n 5.40%,\n 66.41% {\n translate: -50% -36px; /* 20-246 */\n }\n 66.42% {\n translate: -50% -27px; /* 246 */\n }\n 86.67%,\n 98.81% {\n translate: -50% -14px; /* 321 */\n }\n 98.82% {\n translate: -50% 105px;\n }\n\n 0%,\n 77.76%,\n 100% {\n clip-path: polygon(-200% 0%, 300% 0%, 300% 100%, -200% 100%); /* 0-288 */\n }\n 86.67%,\n 90.99%,\n 98.82% {\n clip-path: polygon(-200% 0%, 300% 0%, 300% 0%, -200% 0%); /* 321-337 */\n }\n}\n\n.noodle,\n.noodle::before,\n.noodle::after {\n width: 6px;\n height: 160px;\n background:\n radial-gradient(\n circle at -7px 50%,\n transparent 6px 8px,\n #ffcf8b 8px 10px,\n transparent 0\n )\n 3px 11px / 4px 22px repeat-y,\n radial-gradient(\n circle at 10px 50%,\n transparent 6px 8px,\n #ffcf8b 8px 10px,\n transparent 0\n )\n 0 0 / 3px 22px repeat-y;\n}\n.noodle::before,\n.noodle::after {\n animation: noodleLength var(--time) linear infinite;\n}\n@keyframes noodleLength {\n 0%,\n 2.16% {\n background-position:\n 3px 11px,\n 0 0;\n }\n 97.2%,\n 100% {\n background-position:\n 3px -1489px,\n 0 -1500px;\n }\n}\n\n.noodle::before {\n left: -7px;\n}\n\n.noodle::after {\n left: 7px;\n}\n\n.rightArm {\n top: 50%;\n left: 50%;\n width: 192px;\n height: 50px;\n background: #ff977b;\n transform-origin: 25px 25px;\n border-radius: 99em;\n box-shadow: inset 90px 0 0 -20px white;\n z-index: 1;\n\n animation: rightArm var(--time) linear infinite;\n}\n@keyframes rightArm {\n 0%,\n 66.41%,\n 100% {\n translate: 28px 43px; /* 0-246 */\n rotate: 35deg; /* 0-246 */\n }\n 66.42%,\n 90.99% {\n translate: 28px 69px; /* 246-337 */\n rotate: 23deg; /* 246-337 */\n }\n 93.42% {\n translate: 28px 43px; /* 346 */\n rotate: 35deg; /* 346 */\n }\n}\n\n.rightArm::before {\n top: 0px;\n left: calc(100% - 50px);\n width: 152px;\n height: 50px;\n background: inherit;\n border-radius: inherit;\n transform-origin: inherit;\n\n animation: rightArmBefore var(--time) linear infinite;\n}\n@keyframes rightArmBefore {\n 0%,\n 66.41%,\n 100% {\n rotate: 144deg; /* 0-246 */\n }\n 66.42%,\n 90.99% {\n rotate: 156deg; /* 246-337 */\n }\n 93.42% {\n rotate: 144deg; /* 346 */\n }\n}\n\n.rightArm::after {\n top: 0px;\n left: calc(100% - 50px);\n width: 70px;\n height: 70px;\n background:\n radial-gradient(closest-side, #ff977b 100%, transparent 0) 43px -33px no-repeat,\n radial-gradient(\n closest-side,\n #ff977b calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n )\n 25px 12px / 70% 40% no-repeat,\n radial-gradient(closest-side, #ff977b 100%, transparent 0) -15px -35px\n no-repeat,\n radial-gradient(\n closest-side,\n transparent calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -35px 13px / 100% 70% no-repeat,\n radial-gradient(\n closest-side,\n transparent calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -24px 7px no-repeat,\n radial-gradient(\n closest-side,\n transparent calc(100% - 2px),\n #303083 calc(100% - 2px) 100%,\n transparent 0\n ) -10px 14px no-repeat,\n #ff977b;\n border-radius: 50%;\n transform-origin: inherit;\n\n animation: rightArmAfter var(--time) linear infinite;\n}\n@keyframes rightArmAfter {\n 0%,\n 66.41%,\n 100% {\n transform: rotate(144deg) translate(104px, -3px); /* 0-246 */\n }\n 66.42%,\n 90.99% {\n transform: rotate(156deg) translate(104px, -3px); /* 246-337 */\n }\n 93.42% {\n transform: rotate(144deg) translate(104px, -3px); /* 346 */\n }\n}\n\n/* SCENE 2: TEXT */\n.scene2 {\n width: 100%;\n height: 100%;\n background-color: #fadebd;\n text-align: center;\n line-height: 600px;\n font-size: 4em;\n font-family: \"Indie Flower\", cursive;\n color: #303083;\n z-index: 1;\n\n animation: scene2 var(--time) linear infinite;\n}\n@keyframes scene2 {\n 0%,\n 47.78%,\n 66.43%,\n 100% {\n opacity: 0;\n }\n /* 177-245 */\n 47.79%,\n 66.42% {\n opacity: 1;\n }\n}\n"}

modern-cougar-64

👁 实时预览

📝 源代码