在线版冰墩墩

花了两个多小时画的在线版冰墩墩，需要的拿去
链接地址，直接点击在线版冰墩墩
源码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			body {
				font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
				background: #d4ebf1;
				color: #000;
			}

			.m_body {
				width: 362px;
				height: 410px;
				border: #393939 8px solid;
				margin: 50px auto;
				border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
				position: absolute;
				left: 109px;
				top: -30px;
				background: #fff;
			}

			.ear1,
			.ear2 {
				background: #393939;
				width: 81px;
				height: 115px;
				border-radius: 50%;
				position: absolute;
				z-index: -1;
			}

			.ear1 {
				left: 150px;
				top: 26px;
				transform: rotate(-10deg);
			}

			.ear2 {
				left: 362px;
				top: 28px;
				transform: rotate(10deg);
			}

			.eye1,
			.eye2 {
				background: #393939;
				width: 83px;
				height: 115px;
				border-radius: 50%;
				position: absolute;
			}

			.eye1 {
				left: 185px;
				top: 122px;
				transform: rotate(45deg);
			}

			.eye2 {
				left: 329px;
				top: 122px;
				transform: rotate(-45deg);
			}

			.eye1:before,
			.eye2:before {
				content: "";
				width: 40px;
				height: 40px;
				border: #fff 5px solid;
				border-radius: 100%;
				position: absolute;
				animation-name: eyes-blink;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}

			.eye1:before {
				right: 10px;
				top: 22px;
			}

			.eye2:before {
				left: 10px;
				top: 22px;
			}

			.eye1:after,
			.eye2:after {
				content: "";
				width: 10px;
				height: 10px;
				background: #9b9b9b;
				border-radius: 100%;
				position: absolute;

			}

			.eye1:after {
				right: 27px;
				top: 31px;
			}

			.eye2:after {
				left: 41px;
				top: 44px;
			}

			.face {
				position: absolute;
				border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
			}

			.c_blue {
				border: #6bcdf3 5px solid;
				width: 280px;
				height: 224px;
				left: 150px;
				top: 78px;
			}

			.c_red {
				border: #af2350 5px solid;
				width: 287px;
				height: 233px;
				left: 146px;
				top: 73px;
			}

			.c_purple {
				border: #5d75b3 5px solid;
				width: 295px;
				height: 240px;
				left: 142px;
				top: 70px;
			}

			.c_yellow {
				border: #ffc346 5px solid;
				width: 305px;
				height: 248px;
				left: 137px;
				top: 65px;
			}

			.c_green {
				border: #7fcb58 5px solid;
				width: 313px;
				height: 256px;
				left: 133px;
				top: 61px;
			}

			.arm1,
			.arm2 {
				background: #333;
				position: absolute;
				z-index: -1;
			}

			.arm1 {
				width: 75px;
				height: 118px;
				left: 64px;
				top: 244px;
				transform: rotate(45deg);
				border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
				animation-name: beat;
				animation-duration: 3S;
				animation-iteration-count: infinite;
			}

			.arm2 {
				width: 75px;
				height: 148px;
				left: 463px;
				top: 162px;
				transform: rotate(37deg);
				border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
				animation-name: beat;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}

			.arm2:before {
				content: "";
				width: 16px;
				height: 24px;
				background: #bc242c;
				position: absolute;
				border-top-left-radius: 50%;
				border-top-right-radius: 50%;
				transform: rotate(45deg);
				left: 32px;
				top: 20px;
			}

			.arm2:after {
				content: "";
				width: 16px;
				height: 24px;
				background: #bc242c;
				position: absolute;
				border-top-left-radius: 50%;
				border-top-right-radius: 50%;
				transform: rotate(-45deg);
				left: 26px;
				top: 20px;
			}

			.arm_c {
				content: "";
				width: 16px;
				height: 24px;
				position: absolute;
				left: 426px;
				top: 20px;
			}

			.nose {
				background-color: #333333;
			}

			.nose:before,
			.nose:after {
				content: '';
				position: absolute;
				background-color: inherit;
			}

			.nose,
			.nose:before,
			.nose:after {
				width: 28px;
				height: 18px;
				border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
			}

			.nose {
				position: absolute;
				left: 284px;
				top: 187px;
			}

			.mouse {
				position: absolute;
				left: 265px;
				top: 205px;
				width: 68px;
				height: 25px;
				border-radius: 48%;
				border: #393939 7px solid;
				border-top: none;
				border-left: 0;
				border-right: 0;
				animation: move 0.8s linear infinite alternate;
			}

			.leg1,
			.leg2 {
				background: #333;
				position: absolute;
				width: 83px;
				height: 80px;
				border-radius: 0 0 30px 30px;
				z-index: -1;
			}

			.leg1 {
				left: 187px;
				top: 448px;
				-webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
				animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
			}

			.leg2 {
				left: 328px;
				top: 448px;
				-webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
				animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
			}

			.leg1:after,
			.leg2:after {
				content: "";
				width: 43px;
				height: 30px;
				position: absolute;
				background: #363636;
				border-radius: 30px;
			}

			.leg1:after {
				bottom: 0;
				right: -3px;
			}

			.leg2:after {
				bottom: 0;
				left: -3px;
			}


			@keyframes leg-animation {
				0% {
					height: 80px;
					-webkit-transform: translate3d(0, -80%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
					transform: translate3d(0, -80%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
				}

				25% {
					height: 60px;
				}

				50% {
					height: 80px;
					-webkit-transform: translate3d(0, -80%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
					transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
				}

				75% {
					height: 80px;
				}

				100% {
					height: 80px;
					-webkit-transform: translate3d(0, -80%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
					transform: translate3d(0, -80%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
				}
			}

			@-webkit-keyframes foot-animation {
				0% {
					-webkit-transform: translateX(-49%) rotateZ(-10deg);
					transform: translateX(-49%) rotateZ(-10deg);
				}

				15% {
					-webkit-transform: translateX(-49%) rotateZ(5deg);
					transform: translateX(-49%) rotateZ(5deg);
				}

				40% {
					-webkit-transform: translateX(-49%) rotateZ(0deg);
					transform: translateX(-49%) rotateZ(0deg);
				}

				50% {
					-webkit-transform: translateX(-49%) rotateZ(15deg);
					transform: translateX(-49%) rotateZ(15deg);
				}

				100% {
					-webkit-transform: translateX(-49%) rotateZ(-10deg);
					transform: translateX(-49%) rotateZ(-10deg);
				}
			}

			@keyframes foot-animation {
				0% {
					-webkit-transform: translateX(-49%) rotateZ(-10deg);
					transform: translateX(-49%) rotateZ(-10deg);
				}

				15% {
					-webkit-transform: translateX(-49%) rotateZ(5deg);
					transform: translateX(-49%) rotateZ(5deg);
				}

				40% {
					-webkit-transform: translateX(-49%) rotateZ(0deg);
					transform: translateX(-49%) rotateZ(0deg);
				}

				50% {
					-webkit-transform: translateX(-49%) rotateZ(15deg);
					transform: translateX(-49%) rotateZ(15deg);
				}

				100% {
					-webkit-transform: translateX(-49%) rotateZ(-10deg);
					transform: translateX(-49%) rotateZ(-10deg);
				}
			}

			@-webkit-keyframes foot-shadow-animation {
				0% {
					-webkit-transform: translateX(-50%) rotateZ(-8deg);
					transform: translateX(-50%) rotateZ(-8deg);
					bottom: -20px;
					width: 50px;
				}

				25% {
					bottom: -30px;
					width: 40px;
				}

				50% {
					-webkit-transform: translateX(-50%) rotateZ(13deg);
					transform: translateX(-50%) rotateZ(13deg);
					bottom: -20px;
					width: 50px;
				}

				100% {
					-webkit-transform: translateX(-50%) rotateZ(-8deg);
					transform: translateX(-50%) rotateZ(-8deg);
					bottom: -20px;
					width: 50px;
				}
			}

			@keyframes foot-shadow-animation {
				0% {
					-webkit-transform: translateX(-50%) rotateZ(-8deg);
					transform: translateX(-50%) rotateZ(-8deg);
					bottom: -20px;
					width: 50px;
				}

				25% {
					bottom: -30px;
					width: 40px;
				}

				50% {
					-webkit-transform: translateX(-50%) rotateZ(13deg);
					transform: translateX(-50%) rotateZ(13deg);
					bottom: -20px;
					width: 50px;
				}
			}

			100% {
				-webkit-transform: translateX(-50%) rotateZ(-8deg);
				transform: translateX(-50%) rotateZ(-8deg);
				bottom: -20px;
				width: 50px;
			}
			}

			@-webkit-keyframes eyes-blink {
				0% {
					height: 40px;
				}

				3% {
					height: 30px;
				}

				5% {
					height: 20px;
				}

				100% {
					height: 40px;
				}
			}

			@keyframes eyes-blink {
				0% {
					height: 40px;
				}

				3% {
					height: 35px;
				}

				5% {
					height: 35px;
				}

				100% {
					height: 35px;
				}
			}

			@-webkit-keyframes ele-movement {
				0% {
					-webkit-transform: translate3D(-50%, -54%, 0);
					transform: translate3D(-50%, -54%, 0);
				}

				50% {
					-webkit-transform: translate3D(-50%, -57%, 0);
					transform: translate3D(-50%, -57%, 0);
				}

				100% {
					-webkit-transform: translate3D(-50%, -54%, 0);
					transform: translate3D(-50%, -54%, 0);
				}
			}

			@keyframes move {
				0% {
					transform: scale(1) rotate(10deg);
				}

				0% {
					transform: scale(0.4) rotate(5deg);
				}

				100% {
					transform: scale(0.6) rotate(0deg);
				}
			}

			@keyframes backdiv {
				50% {
					background: #ffe6f2;
				}
			}

			@keyframes beat {
				0% {
					transform: scale(1) rotate(37deg);
				}

				50% {
					transform: scale(0.6) rotate(37deg);
				}
			}
		</style>
	</head>
	<body>
	<div style="    position: absolute;
        top: 0px;
        right: 0px;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 550px;
        height: 888px;">
			<div>
				<div class="m_body"></div>
				<div class="ear1"></div>
				<div class="ear2"></div>
				<div class="eye1"></div>
				<div class="eye2"></div>
				<div class="face c_blue"></div>
				<div class="face c_red"></div>
				<div class="face c_purple"></div>
				<div class="face c_yellow"></div>
				<div class="face c_green"></div>
				<div class="nose"></div>
				<div class="mouse"></div>
				<div class="arm1"></div>
				<div class="arm2"></div>
				<div class="leg1"></div>
				<div class="leg2"></div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
		<script>
			$(".ear1, .ear2").on('click', function() {
				$(".ear1, .ear2").css('transform', 'none');
				setTimeout(function() {
					$(".ear1").css('transform', 'rotate(-10deg)');
					$(".ear2").css('transform', 'rotate(10deg)');
				}, 100)
			})
		</script>
	</body>
</html>
posted @ 2022-02-14 22:41 春风得意之时阅读(286) 评论(0) 编辑收藏举报
刷新页面返回顶部
freddyhuang

坚持到底

在线版冰墩墩

公告
