纯css3动画实现奔跑的小人

最新推荐文章于 2022-09-03 00:01:33 发布

原创最新推荐文章于 2022-09-03 00:01:33 发布 · 4k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #keyframes #html #canvas

CSS 同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML5

23 篇文章

订阅专栏

使用css3动画（纯css3动画实现）

效果展示：

代码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>奔跑的小人</title>

<style>
* {
	padding:0;
	margin:0;
}
body {
	background:#333;
}
.man {
	width:100px;
	height:200px;
	position:absolute;
	top:200px;
	left:100px;
	animation-name:run;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}

@keyframes run {
	0% {
	transform:translateX(0);
}
100% {
	transform:translateX(1200px);
}
}.head {
	width:50px;
	height:60px;
	border-radius:25px;
	border:2px solid white;
	margin:0 auto;
}
.body {
	width:2px;
	height:65px;
	background:white;
	margin:0 auto;
}
.hand-left,.hand-right {
	width:40px;
	height:50px;
	border-left:2px solid white;
	border-bottom:2px solid white;
	position:absolute;
	top:85px;
	left:49px;
	transform-origin:0 0;
}
.hand-left {
	transform:rotate(45deg);
	animation:hand-left 0.5s linear infinite;
}
@keyframes hand-left {
	0% {
	transform:rotate(60deg);
}
50% {
	transform:rotate(-45deg);
}
100% {
	transform:rotate(60deg);
}
}.hand-right {
	transform:rotate(-45deg);
	animation:hand-right 0.5s linear infinite;
}
@keyframes hand-right {
	0% {
	transform:rotate(-45deg);
}
50% {
	transform:rotate(60deg);
}
100% {
	transform:rotate(-45deg);
}
}.leg-left,.leg-right {
	width:50px;
	height:55px;
	border-bottom:2px solid white;
	border-right:2px solid white;
	position:absolute;
	top:128px;
	transform-origin:100% 0;
}
.leg-left {
	transform:rotate(45deg);
	animation:leg-left 0.5s linear infinite;
}
@keyframes leg-left {
	0% {
	transform:rotate(45deg);
}
50% {
	transform:rotate(-60deg);
}
100% {
	transform:rotate(45deg);
}
}.leg-right {
	transform:rotate(-80deg);
	animation:leg-right 0.5s linear infinite;
}
@keyframes leg-right {
	0% {
	transform:rotate(-80deg);
}
50% {
	transform:rotate(45deg);
}
100% {
	transform:rotate(-80deg);
}
}</style>
</head>
<body>
<div class="man">
    <div class="head"></div>
    <div class="body"></div>
    <div class="hand-left"></div>
    <div class="hand-right"></div>
    <div class="leg-left"></div>
    <div class="leg-right"></div>
</div>
<pre style="color:red">
   感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助

                                                              --王      
</pre>
</body>
</html>