效果演示
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Reddit Alien with Sun</title>
<style>
#reddit-alien {width: 296px;height: 380px;position: relative;margin: 0 auto;margin-top: 100px; /* Adjust for sun position */}
#reddit-alien div { position: absolute; }
#reddit-alien .antenna {height: 50px;width: 44px;top: 40px;left: 155px;border: 7px solid black;border-width: 9px 0 0 9px;border-radius: 5px 0 0 0;transform: rotate(16deg);animation: antenna-wobble 2s infinite ease-in-out;}
@keyframes antenna-wobble {0%, 100% { transform: rotate(16deg); }50% { transform: rotate(10deg); }}
#reddit-alien .dot {width: 26px;height: 26px;left: 37px;top: -28px;border: 8px solid black;border-radius: 26px;background: white;}
#reddit-alien .ear {width: 32px;height: 32px;top: 100px;border: 8px solid black;border-radius: 32px;background: white;}
#reddit-alien .ear.left {left: 40px;}
#reddit-alien .ear.right {left: 216px;}
#reddit-alien .head {z-index: 2;top: 88px;left: 52px;height: 115px;width: 182px;border: 9px solid black;border-radius: 150px / 100px;background: white;}
#reddit-alien .eye {z-index: 2;width: 32px;height: 32px;top: 29px;border-radius: 16px;background: orangeRed;animation: blink 4s infinite;}
@keyframes blink {0%, 90%, 100% { height: 32px; }95% { height: 5px; }}
#reddit-alien .eye.left {left: 42px;}
#reddit-alien .eye.right {left: 110px;}
#reddit-alien .mouth {z-index: 1;width: 94px;height: 80px;top: 3px;left: 35px;border: 9px solid white;border-bottom-color: black;border-radius: 150px / 120px;}
#reddit-alien .body {z-index: 1;width: 88px;height: 178px;left: 100px;top: 150px;border: 8px solid black;border-radius: 120px / 250px;background: white;}
#reddit-alien .arm {height: 78px;width: 39px;top: 210px;border: 8px solid black;background: white;animation: arm-shake 1.5s infinite ease-in-out;}
@keyframes arm-shake {0%, 100% { transform: rotate(0deg); }50% { transform: rotate(10deg); }}
#reddit-alien .arm.left {left: 78px;border-radius: 43px 0 0 43px;}
#reddit-alien .arm.right {left: 170px;border-radius: 0 43px 43px 0;}
#reddit-alien .foot {border: 8px solid black;width: 50px;height: 16px;top: 312px;background: white;animation: foot-bounce 2s infinite ease-in-out;}
@keyframes foot-bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-5px); }}
#reddit-alien .foot.left {border-radius: 24px 24px 0 0;left: 82px;}
#reddit-alien .foot.right {border-radius: 24px 24px 0 0;left: 156px;}
#sun {position: absolute;top: -100px;left: 50%;transform: translateX(-50%);width: 100px;height: 100px;background-color: yellow;border-radius: 50%;box-shadow: 0 0 50px rgba(255, 223, 0, 0.8);animation: move-sun 10s infinite linear;}
@keyframes move-sun {0% {top: -100px;left: 0;}50% {top: 50px;left: 50%;}100% {top: -100px;left: 100%;}}
</style>
</head>
<body>
<div id="sun"></div><div id="reddit-alien"><div class="antenna"><div class="dot"></div></div><div class="ear left"></div><div class="ear right"></div><div class="head"><div class="eye left"></div><div class="eye right"></div><div class="mouth"></div></div><div class="arm left"></div><div class="arm right"></div><div class="body"></div><div class="foot left"></div><div class="foot right"></div></div>
</body>
</html>
