css3实现奔跑的小人动画

最新推荐文章于 2022-09-05 07:56:22 发布

敲出真谛

最新推荐文章于 2022-09-05 07:56:22 发布

阅读量3k

点赞数 4

分类专栏： css 文章标签： css3 animation position

本文链接：https://blog.csdn.net/qq_36818627/article/details/84797442

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

定位层级和动画的完美融合

效果图

有点吃藕了，图片不重要奔跑的小人

<!doctype html>
<html><!--根标签-->
    <head> <!--不可视区域-->
		<meta charset="UTF-8"><!--国际编码-->
		<!--网页三要素-->
		<meta name="Keywords" content="关键字">
		<meta name='Description' content="描述">
		<title>奔跑的小人</title>
		<style>
			*{margin: 0;padding: 0;}
			ul,ol{list-style:none;}
			a{text-decoration:none;}
			img{border:0;}
			body{
				background-color:#cc9900;
					
			}
			.wrap{
				position: relative;
				width: 200px;
				height: 300px;
				margin:100px;
				animation:run 10s infinite linear;
			}
			.head{
				position: relative;
				width: 30px;
				height: 30px;
				border:4px solid #fff;
				border-radius:50%;
				transform-origin:bottom center;
				animation:head 1s infinite alternate linear;
			}
			.head:before{
				position: absolute;
				top:-8px;
				left:-10px;
				content:"";
				width: 50px;
				height: 18px;
				background-color:#00ff00;
				border-radius:10px 10px 0 0;
			}
			.head:after{
				position: absolute;
				top:-18px;
				left:5px;
				content:"";
				width: 20px;
				height: 20px;
				background-color:#00ff00;
				border-radius:10px 10px 0 0;
			}
			.body{
				position: absolute;
				top:44px;
				left:11px;
				height: 75px;
				width: 15px;
				background-color: #fff;
			
			
			}
			.body:after{
				position: absolute;
				top:-5px;
				left:4px;
				content:"";
				width: 8px;
				height: 5px;
				background-color:#fff;
			}
			.hand{
				position: absolute;
				top:50px;
				left:14px;
				height: 38px;
				width: 10px;
				background-color: #f66;
				border-radius:5px 5px 0 0;
				animation:hand 1s infinite alternate linear;
				transform-origin:top center;
			}
			.left-hand{
				z-index:-1;
			}
			.hand:after{
				position: absolute;
				bottom:-10px;
				left:-1px;
				content:"";
				width: 12px;
				height: 12px;
				background-color:#ff3300;
				border-radius:50%;
			
			}
			.foot{
				/* z-index:-1; */
				position: absolute;
				top: 118px;
				left:12px;
				height: 60px;
				width: 12px;
				background-color: #060;
				animation:foot 1s infinite alternate linear;
				transform-origin:top center;
			}
			.kucha{
				position: absolute;
				top: 103px;
				left:-28px;
				height: 0px;
				width: 18px;
				border-width:0 37px 29px 37px;
				border-style:none solid solid;
				border-color:transparent transparent red;
			}
			.foot:after{
				
				content:"";
				position: absolute;
				bottom:-10px;
				left:-2px;
				width: 20px;
				height: 10px;
				background-color:#000;
				border-radius:5px 10px 0 0;
			}
			@keyframes hand{
				0%{transform:rotate(30deg);}
				50%{transform:rotate(0deg);}
				100%{transform:rotate(-45deg);}
			}
			.left-hand{
				animation-delay:1s;
			}
			@keyframes foot{
				0%{transform:rotate(30deg);}
				50%{transform:rotate(0deg);}
				100%{transform:rotate(-45deg);}
			}
			.right-foot{
				/* z-index:-2; */
				animation-delay:1s;
			}
			@keyframes head{
				0%{transform:rotate(10deg);}
				50%{transform:rotate(0deg);}
				100%{transform:rotate(-10deg);}
			}

			@keyframes run{
				0%{transform:translateX(-300px);}
				100%{transform:translateX(1400px);}
			}

		</style>
	</head>
	<body><!--可视化区域-->
		<div class="wrap">
			<div class="head"></div>
			<div class="body"></div>
			<div class="left-hand hand"></div>
			<div class="right-hand hand"></div>
			<div class="foot left-foot"></div>
			<div class="foot right-foot"></div>
			<div class="kucha"></div>
		</div>
			
	</body>
</html>