纯CSS实现坦克运动及开炮效果

最新推荐文章于 2022-07-31 23:47:42 发布
骑着代马去流浪
最新推荐文章于 2022-07-31 23:47:42 发布
阅读量1.0k
点赞数
分类专栏： 7788 文章标签：纯CSS实现坦克运动
本文链接：https://blog.csdn.net/weixin_36185028/article/details/73333639
版权
7788 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
先看实现后的效果图：
实现代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wrap {
				position: absolute;
				margin: 300px 50px;
				width: 500px;
				animation: houzuo 1s both 0s ease-out infinite;
			}
			@keyframes houzuo{
				from{transform: scale(1.01);}
				to{transform: scale(1);}
			}
			.div1,.div2,.div4,.div5,.div7,.div8 {
				width: 60px;
				height: 60px;
				background: black;
				border-radius:50%;
			}
			.div1 {
				position: absolute;
				left: 0;
				top: 0;
			}
			.div2 {
				position: absolute;
				left: 70px;
				top: 0;
			}
			.div11,.div21 {
				position: absolute;
				left: 10px;
				top: 10px;
				width: 40px;
				height: 40px;
				background: green;
				border-radius:50%;
			}
			.div3,.div6,.div9 {
				width: 80px;
				height: 12px;
				border-radius: 5px;
				background: gray;
			}
			.div3 {
				position: absolute;
				top: -1px;
				left: 25px;
				animation: div3 1s both 0s linear infinite;
			}
			@keyframes div3{
				0% {transform: translate(0, 0);}
				10% {transform: translate(17.7px, 7.3px);}
				20% {transform: translate(25px, 25px);}
				40% {transform: translate(17.7px,42.7px);}
				50% {transform: translate(0, 50px);}
				60% {transform: translate(-17.7px,42.7px);}
				80% {transform: translate(-25px,25px);}
				90% {transform: translate(-17.7px,7.3px);}
				100% {transform: translate(0, 0);}
			}
			.div31 {
				position: absolute;
				top: 1px;
				left: 1px;
				width: 10px;
				height: 10px;
				background: teal;
				border-radius: 50%;
			}
			.div32 {
				position: absolute;
				top: 1px;
				right: 1px;
				width: 10px;
				height: 10px;
				background: teal;
				border-radius: 50%;
			}
			.div4 {
				position: absolute;
				left: 140px;
				top: 0;
			}
			.div5 {
				position: absolute;
				left: 210px;
				top: 0;
			}
			.div6 {
				position: absolute;
				top: -1px;
				left: 165px;
				animation: div6 1s both 0s linear infinite;
			}
			@keyframes div6{
				0% {transform: translate(0, 0);}
				10% {transform: translate(17.7px, 7.3px);}
				20% {transform: translate(25px, 25px);}
				40% {transform: translate(17.7px,42.7px);}
				50% {transform: translate(0, 50px);}
				60% {transform: translate(-17.7px,42.7px);}
				80% {transform: translate(-25px,25px);}
				90% {transform: translate(-17.7px,7.3px);}
				100% {transform: translate(0, 0);}
			}
			
			.div7 {
				position: absolute;
				left: 280px;
				top: 0;
			}
			.div8 {
				position: absolute;
				left: 350px;
				top: 0;
			}
			.div9 {
				position: absolute;
				top: -1px;
				left: 305px;
				animation: div9 1s both 0s linear infinite;
			}
			@keyframes div9{
				0% {transform: translate(0, 0);}
				10% {transform: translate(17.7px, 7.3px);}
				20% {transform: translate(25px, 25px);}
				40% {transform: translate(17.7px,42.7px);}
				50% {transform: translate(0, 50px);}
				60% {transform: translate(-17.7px,42.7px);}
				80% {transform: translate(-25px,25px);}
				90% {transform: translate(-17.7px,7.3px);}
				100% {transform: translate(0, 0);}
			}
			.div10 {
				position: absolute;
				left: -5px;
				top: -5px;
				width: 410px;
				height: 60px;
				background: grey;
				border: 5px solid #333366;
				border-radius: 35px;
			}
			.div10_bottom div {
				width: 5px;
				height: 5px;
				background: black;
				border-radius: 50%;
			}
			.div10_bottom div:nth-child(1) {
				position: absolute;
				top: 60px;
				left: 97px;
				animation: child1 1s both 0s linear infinite;
			}
			@keyframes child1{
				from{transform: translate(0);}
				to{transform: translate(-80px);}
			}
			.div10_bottom div:nth-child(2) {
				position: absolute;
				top: 60px;
				left: 167px;
				animation: child2 1s both 0s linear infinite;
			}
			@keyframes child2{
				from{transform: translate(0);}
				to{transform: translate(-80px);}
			}
			.div10_bottom div:nth-child(3) {
				position: absolute;
				top: 60px;
				left: 237px;
				animation: child3 1s both 0s linear infinite;
			}
			@keyframes child3{
				from{transform: translate(0);}
				to{transform: translate(-80px);}
			}
			.div10_bottom div:nth-child(4) {
				position: absolute;
				top: 60px;
				left: 307px;
				animation: child4 1s both 0s linear infinite;
			}
			@keyframes child4{
				from{transform: translate(0);}
				to{transform: translate(-80px);}
			}
			.div10_bottom div:nth-child(5) {
				position: absolute;
				top: 60px;
				left: 377px;
				animation: child5 1s both 0s linear infinite;
			}
			@keyframes child5{
				from{transform: translate(0);}
				to{transform: translate(-80px);}
			}
			.div10 .left {
				position: absolute;
				top: 25px;
				left: -5px;
				width: 5px;
				height: 5px;
				background: black;
				border-radius: 50%;
				animation: child_left 1s both 0s linear infinite;
				opacity: 0;
			}
			@keyframes child_left{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			.div10 .right {
				position: absolute;
				top: 25px;
				right: -5px;
				width: 5px;
				height: 5px;
				background: black;
				border-radius: 50%;
				animation: child_right 1s both 0s linear infinite;
				opacity: 0;
			}
			@keyframes child_right{
				from{opacity: 0;}
				to{opacity: 1;}
			}
			.wrap .weiqun {
				position: absolute;
				left: -20px;
				top: -10px;
				width: 420px;
				height: 6px;
				background: darkolivegreen;
				border-radius: 6px;
				border-left:10px solid white;
				border-right:40px solid white;
				border-bottom: 20px solid darkkhaki;
				z-index: 222;
			}
			.wrap .cezhuangjia {
				position: absolute;
				top: -50px;
				left: -10px;
				width: 350px;
				height: 10px;
				border-left: 20px solid white;
				border-right:30px solid white;
				border-bottom: 30px solid darkolivegreen;
				z-index: 222;
			}
			.wrap .paota {
				position: absolute;
				top: -100px;
				left: 50px;
				width: 120px;
				height: 10px;
				border-radius: 10px;
				border-left: 20px solid white;
				border-right: 30px solid white;
				border-bottom: 50px solid #4d515a;
				animation: paota 1s both 0s ease-out infinite;
			}
			@keyframes paota{
				from{transform: scale(1.1);}
				to{transform: scale(1);}
			}
			.wrap .paoguan {
				position: absolute;
				left: 120px;
				top: 10px;
				width: 300px;
				height: 10px;
				background: #808080;
				border-radius: 4px;
				border-right: 3px solid black;
				transform: rotate(-5deg);
			}
			.wrap .xiaoyanqi {
				position: absolute;
				left: 340px;
				top: -3px;
				width: 60px;
				height: 18px;
				background: #808080;
				border-radius: 8px;
				transform: rotate(-5deg);
			}
			.wrap .paogen {
				position: absolute;
				left: 120px;
				top: 13px;
				width: 30px;
				height: 30px;
				background: #4d515a;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				transform: rotate(-5deg);
			}
			.wrap .paotagai {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 120px;
				height: 10px;
				border-bottom: 1px solid black;
				border-top-left-radius: 8px;
				border-top-right-radius: 10px;
				background: #4d515a;
			}
			.wrap .men {
				position: absolute;
				left: 10px;
				top: 15px;
				width: 60px;
				height: 35px;
				border-radius: 8px;
				background: silver;
			}
			.men div {
				width: 5px;
				height: 5px;
				background: gray;
				border-radius: 50%;
			}
			.men div:nth-child(1) {
				position: absolute;
				left: 10px;
				top: 5px;
			}
			.men div:nth-child(2) {
				position: absolute;
				left: 40px;
				top: 5px;
			}
			.men div:nth-child(3) {
				position: absolute;
				left: 40px;
				top: 25px;
			}
			.men div:nth-child(4) {
				position: absolute;
				left: 10px;
				top: 25px;
			}
			.men div:nth-child(5) {
				position: absolute;
				width: 3px;
				height: 30px;
				left: 55px;
				top: 2px;
				background: black;
			}
			.men div:nth-child(6) {
				position: absolute;
				width: 3px;
				height: 30px;
				left: 2px;
				top: 2px;
				background: black;
			}
			
			
			.wrap .paotagai .canggai {
				position: absolute;
				left: 20px;
				top: -15px;
				width: 50px;
				height: 15px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background: black;
			}
			.wrap .paotagai .tianxian {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 1px;
				height: 100px;
				background: black;
				transform-origin: bottom;
				transform: rotate(-20deg);
			}
			.wrap .paodan {
				position: absolute;
				left: 420px;
				top: -5px;
				width: 30px;
				height: 10px;
				background: black;
				border-left:15px dotted red ;
				border-image: webkit-linear-gradient(left red white);
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
				border-right: 3px solid black;
				transform: rotate(-5deg);
				animation: paodan 1s both 0s ease-in infinite;
			}
			@keyframes paodan{
				from{left: 420px;top: -5px;opacity: 1;}
				to{left: 850px;top: -55px;opacity: 0.2;}
			}
			
			.ground {
				position: absolute;
				left: 0px;
				top: 330px;
				width: 100%;
				height: 80px;
				background:#996633;
				z-index: -1;
			}
			.ground img:nth-child(1) {
				position: absolute;
				top: 10px;
				left: 700px;
				width: 40px;
				height: 20px;
				animation: img1 4s both 0s linear infinite;
			}
			@keyframes img1{
				0% {transform: translateX(0);}
				100% {transform: translateX(-800px);}
			}
			.ground img:nth-child(2) {
				position: absolute;
				top: 5px;
				left: 900px;
				width: 40px;
				z-index: 300;
				animation: img2 4s both 0s linear infinite;
			}
			@keyframes img2{
				0% {transform: translateX(0);}
				100% {transform: translateX(-600px);}
			}
			.header {
				position: absolute;
				width: 100%;
				height: 200px;
				background-image: -webkit-linear-gradient(top,#235ce1,white);
			}
			.header img {
				position: absolute;
				left: 800px;
				top: 20px;
				width: 200px;
				height: 80px;
				transform: rotate(180deg);
				animation: baiyun 8s both 0s linear infinite;
			}
			@keyframes baiyun{
				from{left: 800px;opacity: 1;}
				to{left: -200px;opacity: 0.5;}
			}
			.chanzi {
				position: absolute;
				left: 50px;
				top: 15px;
				width: 22px;
				height: 20px;
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
				background: silver;
			}
			.bashou {
				position: absolute;
				left: 72px;
				top: 22px;
				width: 70px;
				height: 8px;
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
				background: #996633;
			}
			.ganggun {
				position: absolute;
				left: 150px;
				top: 22px;
				width: 180px;
				height: 5px;
				border-radius: 10px;
				background: #4d515a;
			}
			.shengzi1 {
				position: absolute;
				left: 80px;
				top: 15px;
				height: 20px;
				width: 3px;
				background: black;
			}
			.shengzi2 {
				position: absolute;
				left: 120px;
				top: 15px;
				height: 20px;
				width: 3px;
				background: black;
			}
			.shengzi3 {
				position: absolute;
				left: 200px;
				top: 18px;
				height: 15px;
				width: 3px;
				background: black;
			}
			.shengzi4 {
				position: absolute;
				left: 300px;
				top: 18px;
				height: 15px;
				width: 3px;
				background: black;
			}
			.paiqiguan {
				position: absolute;
				left: -20px;
				width: 20px;
				height: 35px;
				background: darkolivegreen;
				border-top: 5px solid gray;
				border-radius:4px ;
				transform-origin: bottom;
				transform: rotate(-10deg);
			}
			div.guanchakong {
				position: absolute;
				left: 250px;
				width: 50px;
				height: 10px;
				background: gray;
				border-top-left-radius: 30px;
				border-top-right-radius: 30px;
			}
			div img {
				position: absolute;
				left: -30px;
				top: -18px;
				width: 20px;
				animation: weiqi 0.5s both 0s linear infinite;
			}
			@keyframes weiqi{
				from{transform: translate(0,0) scale(1);opacity: 1;}
				to{transform: translate(-30px,-40px) scale(2.5);opacity: 0.3;}
			}
		</style>
	</head>
	<body>
		<div class="header">
			<img src="img/2.png"/>
		</div>
		<div class="wrap">
			<!--围裙-->
			<div class="weiqun"></div>
			<!--侧装甲-->
			<div class="cezhuangjia">
				<div class="chanzi"></div>
				<div class="bashou"></div>
				<div class="ganggun"></div>
				<div class="shengzi1"></div>
				<div class="shengzi2"></div>
				<div class="shengzi3"></div>
				<div class="shengzi4"></div>
				<div class="paiqiguan"></div>
				<div class="guanchakong"></div>
				<img src="img/4.png"/>
			</div>
			<!--炮塔-->
			<div class="paota">
								<!--炮管-->
				<div class="paoguan"></div>
				<!--硝烟器-->
				<div class="xiaoyanqi"></div>
				<!--炮根-->
				<div class="paogen"></div>
				<!--炮塔盖-->
				<div class="paotagai">
					<!--舱盖-->
					<div class="canggai"></div>
					<!--天线-->	
					<div class="tianxian"></div>
				</div>
				<div class="paodan"></div>
				<div class="men">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>

			<!--履带-->
			<div class="div10">
				<div class="div10_bottom">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<!--第一对负重轮-->
			<div class="div1">
				<div class="div11"></div>
			</div>
			<div class="div2">
				<div class="div21"></div>
			</div>
			<div class="div3">
				<div class="div31"></div>
				<div class="div32"></div>
			</div>
			<!--第二对负重轮-->
			<div class="div4">
				<div class="div11"></div>
			</div>
			<div class="div5">
				<div class="div21"></div>
			</div>
			<div class="div6">
				<div class="div31"></div>
				<div class="div32"></div>
			</div>
			<!--第三对负重轮-->
			<div class="div7">
				<div class="div11"></div>
			</div>
			<div class="div8">
				<div class="div21"></div>
			</div>
			<div class="div9">
				<div class="div31"></div>
				<div class="div32"></div>
			</div>
			
		</div>
		<div class="ground">
			<img src="img/1.png"/>
			<img src="img/1.png"/>
		</div>
	</body>
</html>
用到的素材：
石头
白云
尾气
骑着代马去流浪
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现坦克运动及开炮效果

先看实现后的效果图：实现代码： * { margin: 0; padding: 0; } .wrap { position: absolute; margin: 300px 50px; width: 500px; animation: houzuo 1s both 0s ease-out in
复制链接

扫一扫