htmlcss小人奔跑动画
时间: 2023-12-22 10:28:28 浏览: 43
以下是一个简单的HTML/CSS小人奔跑动画的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>小人奔跑动画</title>
<style>
/* 设置小人的样式 */
.person {
position: relative;
width: 50px;
height: 100px;
background-color: #333;
border-radius: 50px 50px 0 0;
animation: run 1s infinite linear;
}
/* 设置小人的头部 */
.person:before {
content: "";
position: absolute;
top: -30px;
left: 10px;
width: 30px;
height: 30px;
background-color: #333;
border-radius: 50%;
}
/* 设置小人的腿部 */
.person:after {
content: "";
position: absolute;
bottom: 0;
left: 10px;
width: 10px;
height: 30px;
background-color: #333;
border-radius: 10px;
animation: leg 1s infinite linear;
}
/* 设置小人奔跑的动画 */
@keyframes run {
0% {left: 0;}
50% {left: 50%;}
100% {left: 0;}
}
/* 设置小人腿部动画 */
@keyframes leg {
0% {transform: rotate(0);}
50% {transform: rotate(30deg);}
100% {transform: rotate(0);}
}
</style>
</head>
<body>
<div class="person"></div>
</body>
</html>
```