简单机器人动画

原创已于 2025-06-27 13:34:04 修改 · 298 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-05 13:33:51 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单机器人动画</title>
<style>
body {
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 300px;
height: 400px;
}

.robot {
position: absolute;
width: 100px;
height: 150px;
background-color: #4a90e2;
border-radius: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: float 3s ease-in-out infinite;
}

.head {
position: absolute;
width: 80px;
height: 80px;
background-color: #4a90e2;
border-radius: 50%;
top: -40px;
left: 10px;
}

.eye {
position: absolute;
width: 20px;
height: 25px;
background-color: white;
border-radius: 50%;
top: 25px;
}

.eye.left {
left: 20px;
}

.eye.right {
right: 20px;
}

.pupil {
position: absolute;
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
top: 7px;
left: 5px;
animation: blink 3s linear infinite;
}

.body {
position: absolute;
width: 70px;
height: 90px;
background-color: #4a90e2;
top: 50px;
left: 15px;
border-radius: 15px;
}

.arm {
position: absolute;
width: 15px;
height: 60px;
background-color: #4a90e2;
top: 50px;
}

.arm.left {
left: -15px;
animation: swing-left 2s ease-in-out infinite;
transform-origin: top center;
}

.arm.right {
right: -15px;
animation: swing-right 2s ease-in-out infinite;
transform-origin: top center;
}

.leg {
position: absolute;
width: 20px;
height: 40px;
background-color: #4a90e2;
bottom: -40px;
}

.leg.left {
left: 20px;
}

.leg.right {
right: 20px;
}

.message {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
background-color: white;
padding: 10px;
border-radius: 10px;
opacity: 0;
animation: show-message 6s infinite;
}

@keyframes float {
0%, 100% {
transform: translate(-50%, -50%) translateY(0);
}
50% {
transform: translate(-50%, -50%) translateY(-20px);
}
}

@keyframes blink {
0%, 45%, 55%, 100% {
height: 10px;
top: 7px;
}
50% {
height: 2px;
top: 15px;
}
}

@keyframes swing-left {
0%, 100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(20deg);
}
}

@keyframes swing-right {
0%, 100% {
transform: rotate(20deg);
}
50% {
transform: rotate(-20deg);
}
}

@keyframes show-message {
0%, 70%, 100% {
opacity: 0;
}
80%, 90% {
opacity: 1;
}
}

.link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #4a90e2;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="robot">
<div class="head">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
<div class="body"></div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="leg left"></div>
<div class="leg right"></div>
<div class="message">你好! 我是一个小机器人</div>
</div>
</div>


<script>
// 简单的交互效果
document.querySelector('.robot').addEventListener('click', function() {
const message = document.querySelector('.message');
message.textContent = message.textContent === "你好! 我是一个小机器人"
? "点击我很有趣!"
: "你好! 我是一个小机器人";
});
</script>
</body>
</html>