用html做一个火柴人跳舞的动画
时间: 2023-12-22 14:06:26 浏览: 29
好的,以下是一个简单的火柴人跳舞的动画示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>火柴人跳舞</title>
<style>
#dance {
position: relative;
width: 200px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
#stickman {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 150px;
background-color: black;
border-radius: 5px;
overflow: hidden;
animation: dance 1s infinite;
animation-timing-function: ease-in-out;
}
#stickman:before, #stickman:after {
content: "";
position: absolute;
background-color: black;
border-radius: 50%;
animation: bounce 1s infinite;
animation-timing-function: ease-in-out;
}
#stickman:before {
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
}
#stickman:after {
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
}
@keyframes dance {
0% { transform: translateX(0); }
20% { transform: translateX(-20px) rotateZ(-10deg); }
40% { transform: translateX(20px) rotateZ(10deg); }
60% { transform: translateX(-20px) rotateZ(-10deg); }
80% { transform: translateX(20px) rotateZ(10deg); }
100% { transform: translateX(0); }
}
@keyframes bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.8); }
}
</style>
</head>
<body>
<div id="dance">
<div id="stickman"></div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 CSS 动画来实现火柴人的跳舞效果。我们使用了 `position: relative` 和 `position: absolute` 来使火柴人在容器内垂直居中,并且底部对齐。我们使用了 `transform` 属性来使火柴人进行平移和旋转,并且使用了 `animation` 属性来定义动画效果。我们还使用了 `:before` 和 `:after` 伪元素来创建火柴人的头和脚,并且使用了 `border-radius` 属性来使其看起来更加圆润。
你可以将上述代码复制到一个 HTML 文件中,并在浏览器中打开该文件,查看火柴人跳舞的动画效果。