div+css实现野人走路动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现野人走路动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@keyframes handR {
	0% {
		transform: matrix(
			0.3698577880859375,
			-0.919525146484375,
			0.919525146484375,
			0.3698577880859375,
			332.25,
			323.45
		);
		animation-timing-function: linear;
	}
	2.6548672566371683% {
		transform: matrix(
			0.261077880859375,
			-0.9560394287109375,
			0.9560394287109375,
			0.261077880859375,
			324.45,
			339
		);
		animation-timing-function: linear;
	}
	5.3097345132743365% {
		transform: matrix(
			0.14886474609375,
			-0.9798126220703125,
			0.9798126220703125,
			0.14886474609375,
			314.45,
			368.85
		);
		animation-timing-function: linear;
	}
	11.504424778761061% {
		transform: matrix(
			0.5431976318359375,
			-0.82891845703125,
			0.82891845703125,
			0.5431976318359375,
			290.1,
			371.95
		);
		animation-timing-function: linear;
	}
	19.469026548672566% {
		transform: matrix(
			0.8972625732421875,
			-0.420867919921875,
			0.420867919921875,
			0.8972625732421875,
			251.8,
			374.05
		);
		animation-timing-function: linear;
	}
	25.663716814159294% {
		transform: matrix(
			0.99102783203125,
			-0.0091552734375,
			0.0091552734375,
			0.99102783203125,
			219.4,
			373.25
		);
		animation-timing-function: linear;
	}
	39.823008849557525% {
		transform: matrix(
			0.677398681640625,
			0.7234039306640625,
			-0.7234039306640625,
			0.677398681640625,
			167.2,
			349.9
		);
		animation-timing-function: linear;
	}
	46.017699115044245% {
		transform: matrix(
			0.6745452880859375,
			0.7260589599609375,
			-0.7260589599609375,
			0.6745452880859375,
			151.15,
			353.05
		);
		animation-timing-function: linear;
	}
	52.21238938053098% {
		transform: matrix(
			0.6717071533203125,
			0.7286834716796875,
			-0.7286834716796875,
			0.6717071533203125,
			137.25,
			363.35
		);
		animation-timing-function: linear;
	}
	57.52212389380531% {
		transform: matrix(
			0.745086669921875,
			0.6534881591796875,
			-0.6534881591796875,
			0.745086669921875,
			151.7,
			383.9
		);
		animation-timing-function: linear;
	}
	61.94690265486725% {
		transform: matrix(
			0.8865814208984375,
			0.4428863525390625,
			-0.4428863525390625,
			0.8865814208984375,
			174,
			374.35
		);
		animation-timing-function: linear;
	}
	65.48672566371681% {
		transform: matrix(
			0.958282470703125,
			0.2528228759765625,
			-0.2528228759765625,
			0.958282470703125,
			193.65,
			372.05
		);
		animation-timing-function: linear;
	}
	70.79646017699115% {
		transform: matrix(
			0.989837646484375,
			-0.0494842529296875,
			0.0494842529296875,
			0.989837646484375,
			224.85,
			375.45
		);
		animation-timing-function: linear;
	}
	85.84070796460178% {
		transform: matrix(
			0.6540679931640625,
			-0.744537353515625,
			0.744537353515625,
			0.6540679931640625,
			297.1,
			362.05
		);
		animation-timing-function: linear;
	}
	92.03539823008849% {
		transform: matrix(
			0.5364837646484375,
			-0.833282470703125,
			0.833282470703125,
			0.5364837646484375,
			315.2,
			342.9
		);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(
			0.3683319091796875,
			-0.9200592041015625,
			0.9200592041015625,
			0.3683319091796875,
			332.3,
			323.55
		);
		animation-timing-function: linear;
	}
}
@keyframes biceptR {
	0% {
		transform: matrix(
			0.46612548828125,
			-0.87506103515625,
			0.87506103515625,
			0.46612548828125,
			224.55,
			269.7
		);
		animation-timing-function: linear;
	}
	2.6548672566371683% {
		transform: matrix(
			0.61572265625,
			-0.777008056640625,
			0.777008056640625,
			0.61572265625,
			225.3,
			270.65
		);
		animation-timing-function: linear;
	}
	5.3097345132743365% {
		transform: matrix(
			0.7453155517578125,
			-0.6537017822265625,
			0.6537017822265625,
			0.7453155517578125,
			226.05,
			287.45
		);
		animation-timing-function: linear;
	}
	11.504424778761061% {
		transform: matrix(
			0.8834075927734375,
			-0.449920654296875,
			0.449920654296875,
			0.8834075927734375,
			226.95,
			269.5
		);
		animation-timing-function: linear;
	}
	19.469026548672566% {
		transform: matrix(
			0.9801025390625,
			-0.149169921875,
			0.149169921875,
			0.9801025390625,
			227.7,
			256
		);
		animation-timing-function: linear;
	}
	25.663716814159294% {
		transform: matrix(
			0.9866790771484375,
			0.09674072265625,
			-0.09674072265625,
			0.9866790771484375,
			227.95,
			253.05
		);
		animation-timing-function: linear;
	}
	39.823008849557525% {
		transform: matrix(
			0.7737274169921875,
			0.6198272705078125,
			-0.6198272705078125,
			0.7737274169921875,
			227.25,
			247.8
		);
		animation-timing-function: linear;
	}
	46.017699115044245% {
		transform: matrix(
			0.7285308837890625,
			0.672393798828125,
			-0.672393798828125,
			0.7285308837890625,
			227.05,
			260.1
		);
		animation-timing-function: linear;
	}
	52.21238938053098% {
		transform: matrix(
			0.67974853515625,
			0.7216644287109375,
			-0.7216644287109375,
			0.67974853515625,
			226.85,
			282.55
		);
		animation-timing-function: linear;
	}
	57.52212389380531% {
		transform: matrix(
			0.806884765625,
			0.576019287109375,
			-0.576019287109375,
			0.806884765625,
			227.3,
			290.1
		);
		animation-timing-function: linear;
	}
	61.94690265486725% {
		transform: matrix(
			0.90252685546875,
			0.4102630615234375,
			-0.4102630615234375,
			0.90252685546875,
			227.65,
			266.3
		);
		animation-timing-function: linear;
	}
	65.48672566371681% {
		transform: matrix(
			0.9549407958984375,
			0.2663116455078125,
			-0.2663116455078125,
			0.9549407958984375,
			227.85,
			256.3
		);
		animation-timing-function: linear;
	}
	70.79646017699115% {
		transform: matrix(
			0.9906005859375,
			0.03961181640625,
			-0.03961181640625,
			0.9906005859375,
			227.85,
			254.85
		);
		animation-timing-function: linear;
	}
	85.84070796460178% {
		transform: matrix(
			0.8747406005859375,
			-0.466552734375,
			0.466552734375,
			0.8747406005859375,
			226.7,
			265.95
		);
		animation-timing-function: linear;
	}
	92.03539823008849% {
		transform: matrix(
			0.726654052734375,
			-0.674407958984375,
			0.674407958984375,
			0.726654052734375,
			225.85,
			262.75
		);
		animation-timing-function: linear;
	}
	100% {
		transform: matrix(
			0.4672393798828125,
			-0.8743743896484375,
			0.8743743896484375,
			0.4672393798828125,
			224.45,
			269.8
		);
		animation-timing-function: linear;
	}
}
@keyframes handL {
	0% {
		transform: matrix(
			0.5703125,
			0.8106689453125,
			-0.8106689453125,
			0.5703125,
			44.4,
			351.85
		);
		animation-timing-function: linear;
	}
	2.6548672566371683% {
		transform: matrix(
			0.5625762939453125,
			0.8159942626953125,
			-0.8159942626953125,
			0.5625762939453125,
			50.8,
			362
		);
		animation-timing-function: linear;
	}
	5.3097345132743365% {
		transform: matrix(
			0.5520782470703125,
			0.8231048583984375,
			-0.8231048583984375,
			0.5520782470703125,
			58.65,
			386.85
		);
		animation-timing-function: linear;
	}
	11.504424778761061% {
		transform: matrix(
			0.770050048828125,
			0.62396240234375,
			-0.62396240234375,
			0.770050048828125,
			93.8,
			390.6
		);
		animation-timing-function: linear;
	}
	19.4690.........完整代码请登录后点击上方下载按钮下载查看