{"html":"

\n\n

\n","css":".main {\n position: relative;\n width: 30vmax;\n height: 30vmax;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n .main {\n position: relative;\n /* Scaled down from 30vmax */\n width: 15vmax;\n height: 15vmax;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10; /* Ensure owl is in front of clouds */\n }\n\n .owl {\n position: relative;\n /* Scaled down from 15vmax x 20vmax */\n width: 7.5vmax;\n height: 10vmax;\n animation: float 6s ease-in-out infinite;\n }\n\n /* Shadow */\n .owl::before {\n content: \"\";\n position: absolute;\n /* Scaled down */\n bottom: -2vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 9vmax;\n height: 0.75vmax;\n background-color: #00000020;\n border-radius: 50%;\n z-index: -10;\n animation: shadow-bob 6s ease-in-out infinite;\n }\n\n .owl__body {\n position: absolute;\n /* Scaled down */\n bottom: 1.5vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 7vmax;\n height: 7vmax;\n background-color: #8c6d52;\n border-radius: 50% 50% 45% 45%;\n z-index: 2;\n }\n\n /* Tummy Patch */\n .owl__body::before {\n content: \"\";\n position: absolute;\n /* Scaled down */\n bottom: 0.25vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 4.5vmax;\n height: 4vmax;\n background-color: #c9b7a8;\n border-radius: 50% 50% 40% 40%;\n }\n\n /* Feather Pattern on tummy */\n .owl__body::after {\n content: \"v v v\";\n position: absolute;\n /* Scaled down */\n bottom: 1.5vmax;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.75vmax;\n font-weight: bold;\n color: #8c6d5299;\n font-family: \"Courier New\", Courier, monospace;\n line-height: 0.8;\n letter-spacing: 0.25vmax;\n }\n\n .owl__head {\n position: absolute;\n top: 0;\n left: 50%;\n transform-origin: bottom center;\n /* Scaled down */\n width: 7.5vmax;\n height: 6.5vmax;\n background-color: #a58467;\n border-radius: 50%;\n z-index: 3;\n animation: head-tilt 6s ease-in-out infinite;\n }\n\n /* Ear Tufts */\n .owl__tuft {\n position: absolute;\n /* Scaled down */\n top: -0.5vmax;\n width: 1.5vmax;\n height: 2vmax;\n background-color: #8c6d52;\n z-index: -1;\n animation: tuft-wiggle 6s ease-in-out infinite;\n }\n .owl__tuft--left {\n left: 0.5vmax; /* Scaled down */\n border-radius: 70% 30% 0 0;\n transform: rotate(-10deg);\n }\n .owl__tuft--right {\n right: 0.5vmax; /* Scaled down */\n border-radius: 30% 70% 0 0;\n transform: rotate(10deg);\n animation-delay: -0.2s;\n }\n\n .owl__eye {\n position: absolute;\n /* Scaled down */\n top: 1.25vmax;\n width: 2.5vmax;\n height: 2.5vmax;\n background-color: #fff;\n border-radius: 50%;\n border: 0.25vmax solid #8c6d52;\n overflow: hidden;\n animation: blink 6s linear infinite;\n }\n\n /* Pupil */\n .owl__eye::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n /* Scaled down */\n width: 1.25vmax;\n height: 1.25vmax;\n background-color: #2c2c2c;\n border-radius: 50%;\n animation: pupil-move 6s ease-in-out infinite;\n }\n\n .owl__eye--left {\n left: 0.75vmax; /* Scaled down */\n }\n\n .owl__eye--right {\n right: 0.75vmax; /* Scaled down */\n }\n\n .owl__beak {\n position: absolute;\n /* Scaled down */\n top: 3.5vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 0.75vmax solid transparent;\n border-right: 0.75vmax solid transparent;\n border-top: 1vmax solid #f2b705;\n }\n\n .owl__wing {\n position: absolute;\n /* Scaled down */\n top: 2.5vmax;\n width: 4vmax;\n height: 6vmax;\n background-color: #a58467;\n border-radius: 80% 10% 80% 10%;\n z-index: 1;\n }\n\n .owl__wing--left {\n left: -1vmax; /* Scaled down */\n transform-origin: top right;\n animation: flap-left 6s ease-in-out infinite;\n }\n\n .owl__wing--right {\n right: -1vmax; /* Scaled down */\n transform-origin: top left;\n border-radius: 10% 80% 10% 80%;\n animation: flap-right 6s ease-in-out infinite;\n }\n\n .owl__foot {\n position: absolute;\n /* Scaled down */\n bottom: 1vmax;\n width: 1vmax;\n height: 0.75vmax;\n background-color: #f2b705;\n border-radius: 40% 40% 50% 50%;\n z-index: 4;\n animation: dangle 3s ease-in-out infinite;\n }\n\n .owl__foot--left {\n left: 2vmax; /* Scaled down */\n }\n .owl__foot--right {\n right: 2vmax; /* Scaled down */\n animation-delay: -1.5s;\n }\n\n /* Cloud styling */\n .cloud {\n position: absolute;\n /* Scaled down */\n width: 7.5vmax;\n height: 2.5vmax;\n background-color: #ffffff;\n border-radius: 2.5vmax;\n opacity: 0.8;\n animation: cloud-drift linear infinite;\n }\n .cloud::before,\n .cloud::after {\n content: \"\";\n position: absolute;\n background-color: #ffffff;\n border-radius: 50%;\n }\n .cloud::before {\n /* Scaled down */\n width: 4vmax;\n height: 4vmax;\n top: -2vmax;\n left: 1vmax;\n }\n .cloud::after {\n /* Scaled down */\n width: 3vmax;\n height: 3vmax;\n top: -1vmax;\n right: 0.5vmax;\n }\n .cloud--1 {\n top: 20%;\n animation-duration: 40s;\n }\n .cloud--2 {\n top: 50%;\n transform: scale(0.7);\n animation-duration: 60s;\n animation-delay: -20s;\n }\n\n /*==============================*/\n /* Keyframe Animations */\n /*==============================*/\n @keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n /* Scaled down from -4vmax */\n transform: translateY(-2vmax);\n }\n }\n\n @keyframes shadow-bob {\n 0%,\n 100% {\n transform: translateX(-50%) scale(1);\n opacity: 1;\n }\n 50% {\n transform: translateX(-50%) scale(0.7);\n opacity: 0.5;\n }\n }\n\n @keyframes flap-left {\n 0%,\n 100% {\n transform: rotate(10deg);\n }\n 50% {\n transform: rotate(-25deg);\n }\n }\n\n @keyframes flap-right {\n 0%,\n 100% {\n transform: rotate(-10deg);\n }\n 50% {\n transform: rotate(25deg);\n }\n }\n\n @keyframes blink {\n 0%,\n 93%,\n 96%,\n 100% {\n transform: scaleY(1);\n }\n 95% {\n transform: scaleY(0.1);\n }\n }\n\n @keyframes pupil-move {\n 0%,\n 30% {\n transform: translate(-50%, -50%);\n } /* Center */\n 40%,\n 60% {\n transform: translate(-80%, -50%);\n } /* Left */\n 70%,\n 90% {\n transform: translate(-20%, -50%);\n } /* Right */\n 100% {\n transform: translate(-50%, -50%);\n } /* Center */\n }\n\n @keyframes dangle {\n 0%,\n 100% {\n transform: rotate(5deg);\n }\n 50% {\n transform: rotate(-10deg);\n }\n }\n\n @keyframes head-tilt {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(0deg);\n }\n 20%,\n 30% {\n transform: translateX(-50%) rotate(-8deg);\n }\n 70%,\n 80% {\n transform: translateX(-50%) rotate(8deg);\n }\n }\n\n @keyframes tuft-wiggle {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n /* Scaled down from -0.3vmax */\n transform: translateY(-0.15vmax);\n }\n }\n\n @keyframes cloud-drift {\n from {\n /* Scaled down from -25vmax */\n left: -12.5vmax;\n }\n to {\n left: 110%;\n }\n } /* Ensure owl is in front of clouds */\n}\n\n.owl {\n position: relative;\n width: 15vmax;\n height: 20vmax;\n animation: float 6s ease-in-out infinite;\n}\n\n/* Shadow */\n.owl::before {\n content: \"\";\n position: absolute;\n bottom: -4vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 18vmax;\n height: 1.5vmax;\n background-color: #00000020;\n border-radius: 50%;\n z-index: -10;\n animation: shadow-bob 6s ease-in-out infinite;\n}\n\n.owl__body {\n position: absolute;\n bottom: 3vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 14vmax;\n height: 14vmax;\n background-color: #8c6d52;\n border-radius: 50% 50% 45% 45%;\n z-index: 2;\n}\n\n/* Tummy Patch */\n.owl__body::before {\n content: \"\";\n position: absolute;\n bottom: 0.5vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 9vmax;\n height: 8vmax;\n background-color: #c9b7a8;\n border-radius: 50% 50% 40% 40%;\n}\n\n/* Feather Pattern on tummy */\n.owl__body::after {\n content: \"v v v\";\n position: absolute;\n bottom: 3vmax;\n left: 50%;\n transform: translateX(-50%);\n font-size: 1.5vmax;\n font-weight: bold;\n color: #8c6d5299;\n font-family: \"Courier New\", Courier, monospace;\n line-height: 0.8;\n letter-spacing: 0.5vmax;\n}\n\n.owl__head {\n position: absolute;\n top: 0;\n left: 50%;\n transform-origin: bottom center;\n width: 15vmax;\n height: 13vmax;\n background-color: #a58467;\n border-radius: 50%;\n z-index: 3;\n animation: head-tilt 6s ease-in-out infinite;\n}\n\n/* Ear Tufts */\n.owl__tuft {\n position: absolute;\n top: -1vmax;\n width: 3vmax;\n height: 4vmax;\n background-color: #8c6d52;\n z-index: -1;\n animation: tuft-wiggle 6s ease-in-out infinite;\n}\n.owl__tuft--left {\n left: 1vmax;\n border-radius: 70% 30% 0 0;\n transform: rotate(-10deg);\n}\n.owl__tuft--right {\n right: 1vmax;\n border-radius: 30% 70% 0 0;\n transform: rotate(10deg);\n animation-delay: -0.2s;\n}\n\n.owl__eye {\n position: absolute;\n top: 2.5vmax;\n width: 5vmax;\n height: 5vmax;\n background-color: #fff;\n border-radius: 50%;\n border: 0.5vmax solid #8c6d52;\n overflow: hidden;\n animation: blink 6s linear infinite;\n}\n\n/* Pupil */\n.owl__eye::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2.5vmax;\n height: 2.5vmax;\n background-color: #2c2c2c;\n border-radius: 50%;\n animation: pupil-move 6s ease-in-out infinite;\n}\n\n.owl__eye--left {\n left: 1.5vmax;\n}\n\n.owl__eye--right {\n right: 1.5vmax;\n}\n\n.owl__beak {\n position: absolute;\n top: 7vmax;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 1.5vmax solid transparent;\n border-right: 1.5vmax solid transparent;\n border-top: 2vmax solid #f2b705;\n}\n\n.owl__wing {\n position: absolute;\n top: 5vmax;\n width: 8vmax;\n height: 12vmax;\n background-color: #a58467;\n border-radius: 80% 10% 80% 10%;\n z-index: 1;\n}\n\n.owl__wing--left {\n left: -2vmax;\n transform-origin: top right;\n animation: flap-left 6s ease-in-out infinite;\n}\n\n.owl__wing--right {\n right: -2vmax;\n transform-origin: top left;\n border-radius: 10% 80% 10% 80%;\n animation: flap-right 6s ease-in-out infinite;\n}\n\n.owl__foot {\n position: absolute;\n bottom: 2vmax;\n width: 2vmax;\n height: 1.5vmax;\n background-color: #f2b705;\n border-radius: 40% 40% 50% 50%;\n z-index: 4;\n animation: dangle 3s ease-in-out infinite;\n}\n\n.owl__foot--left {\n left: 4vmax;\n}\n.owl__foot--right {\n right: 4vmax;\n animation-delay: -1.5s;\n}\n\n/* Cloud styling */\n.cloud {\n position: absolute;\n width: 15vmax;\n height: 5vmax;\n background-color: #ffffff;\n border-radius: 5vmax;\n opacity: 0.8;\n animation: cloud-drift linear infinite;\n}\n.cloud::before,\n.cloud::after {\n content: \"\";\n position: absolute;\n background-color: #ffffff;\n border-radius: 50%;\n}\n.cloud::before {\n width: 8vmax;\n height: 8vmax;\n top: -4vmax;\n left: 2vmax;\n}\n.cloud::after {\n width: 6vmax;\n height: 6vmax;\n top: -2vmax;\n right: 1vmax;\n}\n.cloud--1 {\n top: 20%;\n animation-duration: 40s;\n}\n.cloud--2 {\n top: 50%;\n transform: scale(0.7);\n animation-duration: 60s;\n animation-delay: -20s;\n}\n\n/*==============================*/\n/* Keyframe Animations */\n/*==============================*/\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-4vmax);\n }\n}\n\n@keyframes shadow-bob {\n 0%,\n 100% {\n transform: translateX(-50%) scale(1);\n opacity: 1;\n }\n 50% {\n transform: translateX(-50%) scale(0.7);\n opacity: 0.5;\n }\n}\n\n@keyframes flap-left {\n 0%,\n 100% {\n transform: rotate(10deg);\n }\n 50% {\n transform: rotate(-25deg);\n }\n}\n\n@keyframes flap-right {\n 0%,\n 100% {\n transform: rotate(-10deg);\n }\n 50% {\n transform: rotate(25deg);\n }\n}\n\n@keyframes blink {\n 0%,\n 93%,\n 96%,\n 100% {\n transform: scaleY(1);\n }\n 95% {\n transform: scaleY(0.1);\n }\n}\n\n@keyframes pupil-move {\n 0%,\n 30% {\n transform: translate(-50%, -50%);\n } /* Center */\n 40%,\n 60% {\n transform: translate(-80%, -50%);\n } /* Left */\n 70%,\n 90% {\n transform: translate(-20%, -50%);\n } /* Right */\n 100% {\n transform: translate(-50%, -50%);\n } /* Center */\n}\n\n@keyframes dangle {\n 0%,\n 100% {\n transform: rotate(5deg);\n }\n 50% {\n transform: rotate(-10deg);\n }\n}\n\n@keyframes head-tilt {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(0deg);\n }\n 20%,\n 30% {\n transform: translateX(-50%) rotate(-8deg);\n }\n 70%,\n 80% {\n transform: translateX(-50%) rotate(8deg);\n }\n}\n\n@keyframes tuft-wiggle {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-0.3vmax);\n }\n}\n\n/* UPDATED: Removed vw unit */\n@keyframes cloud-drift {\n from {\n left: -25vmax;\n }\n to {\n left: 110%;\n } /* Changed from 100vw to 110% */\n}\n"}

strong-moose-82

👁 实时预览

📝 源代码