{"html":"

\n\n

\n","css":".main {\n position: relative;\n /* Scaled down from 20vmax */\n width: 10vmax;\n height: 10vmax;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.cat {\n position: relative;\n /* Scaled down from 20vmax x 18vmax */\n width: 10vmax;\n height: 9vmax;\n}\n\n.cat::before {\n content: \"\";\n position: absolute;\n /* Scaled down */\n bottom: -0.5vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 7.5vmax;\n height: 1vmax;\n background-color: #dcdcdc;\n border-radius: 50%;\n z-index: -10;\n animation: shadow 8s ease-in-out infinite;\n}\n\n.cat__body {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n /* Scaled down */\n width: 7.5vmax;\n height: 5vmax;\n background-color: #7d7d7d;\n border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;\n z-index: -1;\n animation: body-bob 8s ease-in-out infinite;\n}\n\n.cat__paws {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n /* Scaled down */\n width: 5.5vmax;\n height: 1.5vmax;\n z-index: 2;\n animation: body-bob 8s ease-in-out infinite;\n}\n\n.cat__paw {\n position: absolute;\n bottom: 0;\n /* Scaled down */\n width: 2vmax;\n height: 1.25vmax;\n background-color: #9c9c9c;\n border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;\n}\n\n.cat__paw--left {\n left: 0;\n}\n.cat__paw--right {\n right: 0;\n}\n\n.cat__tail {\n position: absolute;\n /* Scaled down */\n bottom: 0.5vmax;\n left: -2vmax;\n width: 6vmax;\n height: 1.25vmax;\n background-color: #7d7d7d;\n border-radius: 1vmax;\n transform-origin: 100% 50%; /* Pivot from the base */\n transform: rotate(30deg);\n animation: tail-sway 8s ease-in-out infinite;\n}\n\n.cat__head {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n /* Scaled down */\n width: 6vmax;\n height: 5.5vmax;\n background-color: #9c9c9c;\n border-radius: 50%;\n animation: head-turn 8s ease-in-out infinite;\n}\n\n.cat__ear {\n position: absolute;\n /* Scaled down */\n top: -0.5vmax;\n width: 2.5vmax;\n height: 2.5vmax;\n background-color: #9c9c9c;\n z-index: -1;\n}\n\n.cat__ear::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n height: 70%;\n background-color: #f5c3c3;\n}\n\n.cat__ear--left {\n left: -0.5vmax; /* Scaled down */\n border-radius: 5% 70% 5% 50%;\n transform: rotate(-15deg);\n animation: ear-twitch-left 8s ease-in-out infinite;\n}\n.cat__ear--left::before {\n border-radius: 5% 70% 5% 50%;\n}\n\n.cat__ear--right {\n right: -0.5vmax; /* Scaled down */\n border-radius: 70% 5% 50% 5%;\n transform: rotate(15deg);\n animation: ear-twitch-right 8s ease-in-out infinite;\n}\n.cat__ear--right::before {\n border-radius: 70% 5% 50% 5%;\n}\n\n.cat__eye {\n position: absolute;\n /* Scaled down */\n top: 2vmax;\n width: 1.25vmax;\n height: 1.25vmax;\n background-color: #a8e6cf;\n border-radius: 50%;\n animation: blink 8s linear infinite;\n}\n\n.cat__eye::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n /* Scaled down */\n width: 0.25vmax;\n height: 0.6vmax;\n background-color: #2c3e50;\n border-radius: 0.125vmax;\n}\n\n.cat__eye--left {\n left: 1vmax; /* Scaled down */\n}\n\n.cat__eye--right {\n right: 1vmax; /* Scaled down */\n}\n\n.cat__nose {\n position: absolute;\n /* Scaled down */\n top: 3.25vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 0.75vmax;\n height: 0.5vmax;\n background-color: #f5c3c3;\n border-radius: 20% 20% 50% 50%;\n}\n\n.cat__mouth {\n position: absolute;\n /* Scaled down */\n top: 3.75vmax;\n left: 50%;\n width: 1.5vmax;\n height: 0.75vmax;\n transform: translateX(-50%);\n animation: meow 8s ease-in-out infinite;\n}\n\n.cat__mouth::before,\n.cat__mouth::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 50%;\n height: 100%;\n border-style: solid;\n border-color: #444;\n /* Scaled down */\n border-width: 0 0 0.1vmax 0;\n border-radius: 0 0 50% 50% / 0 0 100% 100%;\n}\n.cat__mouth::before {\n left: 0;\n transform: rotate(10deg);\n}\n.cat__mouth::after {\n right: 0;\n transform: rotate(-10deg);\n}\n\n.cat__whiskers-l,\n.cat__whiskers-r {\n position: absolute;\n /* Scaled down */\n top: 3.75vmax;\n width: 2.5vmax;\n height: 1.5vmax;\n}\n\n.cat__whiskers-l {\n left: -0.25vmax; /* Scaled down */\n transform: rotate(10deg);\n}\n\n.cat__whiskers-r {\n right: -0.25vmax; /* Scaled down */\n transform: rotate(-10deg);\n}\n\n.cat__whiskers-l::before,\n.cat__whiskers-l::after,\n.cat__whiskers-r::before,\n.cat__whiskers-r::after {\n content: \"\";\n position: absolute;\n /* Scaled down */\n height: 0.075vmax;\n background-color: #444;\n border-radius: 0.05vmax;\n}\n\n.cat__whiskers-l::before {\n width: 80%;\n top: 0;\n left: 0;\n transform: rotate(-10deg);\n}\n.cat__whiskers-l::after {\n width: 100%;\n top: 0.5vmax; /* Scaled down */\n left: 0;\n}\n\n.cat__whiskers-r::before {\n width: 80%;\n top: 0;\n right: 0;\n transform: rotate(10deg);\n}\n.cat__whiskers-r::after {\n width: 100%;\n top: 0.5vmax; /* Scaled down */\n right: 0;\n}\n\n/*==============================*/\n/* Keyframe Animations */\n/*==============================*/\n\n@keyframes head-turn {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(0deg);\n }\n 20% {\n transform: translateX(-55%) rotate(-5deg);\n }\n 60% {\n transform: translateX(-45%) rotate(5deg);\n }\n 80% {\n transform: translateX(-50%) rotate(0deg);\n }\n}\n\n@keyframes tail-sway {\n 0%,\n 20%,\n 100% {\n transform: rotate(30deg);\n }\n 50% {\n transform: rotate(0deg);\n }\n 80% {\n transform: rotate(-25deg);\n }\n}\n\n@keyframes blink {\n 0%,\n 38%,\n 41%,\n 88%,\n 91%,\n 100% {\n transform: scaleY(1);\n }\n 40%,\n 90% {\n transform: scaleY(0.1);\n }\n}\n\n@keyframes body-bob {\n 0%,\n 100% {\n bottom: 0;\n }\n 50% {\n /* Scaled down */\n bottom: 0.25vmax;\n }\n}\n\n@keyframes ear-twitch-left {\n 0%,\n 50%,\n 100% {\n transform: rotate(-15deg);\n }\n 55% {\n transform: rotate(-25deg);\n }\n 60% {\n transform: rotate(-15deg);\n }\n}\n\n@keyframes ear-twitch-right {\n 0%,\n 70%,\n 100% {\n transform: rotate(15deg);\n }\n 75% {\n transform: rotate(25deg);\n }\n 80% {\n transform: rotate(15deg);\n }\n}\n@keyframes meow {\n 0%,\n 50%,\n 60%,\n 100% {\n transform: translateX(-50%) scaleY(1);\n }\n 55% {\n transform: translateX(-50%) scaleY(1.3);\n }\n}\n\n@keyframes shadow {\n 0%,\n 100% {\n /* Scaled from 15vmax */\n width: 7.5vmax;\n opacity: 1;\n }\n 50% {\n /* Scaled from 16vmax */\n width: 8vmax;\n opacity: 0.8;\n }\n}\n"}

hard-turkey-69

👁 实时预览

📝 源代码