151行html+CSS3绘制出动态的“哆啦A梦”

IT资讯
1240
文章
275
评论
2018-10-2312:54:56
评论7,415 6546字
纯css3基于animation，transform属性绘画卡通多啦A梦机器猫招手动画特效。
效果：
代码截图：
源代码：
Source code
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main{width:640px;height:550px;background:lightblue;margin:0 auto;position:relative;margin-top:30px;}
			header{width:330px;height:330px;background:#04a0ea;border-radius:50%;margin-left:150px;border:2px solid #666;}
			.face{width:290px;height:290px;background:#fff;border-radius:50%;position:relative;top:37px;border:2px solid #666;
				left:18px;}
			.eye_1{width:70px;height:85px;border:2px solid #666;border-top-left-radius:70px;background:#fff;z-index:2;
				position:relative;left:90px;top:-290px;border-radius:50%;}
			.eye_11{width:25px;height:30px;border:2px solid #666;background:#000;border-radius:50%;z-index:3;
				position:relative;left:120px;top:-345px;
				animation-name:myFrame1;
				animation-duration:2s;
				animation-iteration-count:infinite;
				animation-direction:alternate;
				}
			@keyframes myFrame1{
				0%{transform:translateX(-20px);};
				50%{transform:translateX(20px);};
				100%{transform:translateX(-20px);};
			}
			.eye_2{width:70px;height:85px;border:2px solid #666;border-top-left-radius:70px;background:#fff;z-index:2;
				position:relative;left:162px;top:-414px;border-radius:50%;}
			.eye_22{width:25px;height:30px;border:2px solid #666;background:#000;border-radius:50%;z-index:3;
				position:relative;left:178px;top:-469px;
				animation-name:myFrame2;
				animation-duration:2s;
				animation-iteration-count:infinite;
				animation-direction:alternate;
				}
			@keyframes myFrame2{
				0%{transform:translateX(20px)};
				50%{transform:translateX(-20px)};
				100%{transform:translateX(20px)}
			}
			.nose{width:50px;height:50px;background:#d10e30;border-radius:50%;border:2px solid #666;position:relative;
				left:136px;top:-472px;z-index:3;}
			.white{width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #666;position:relative;
				left:151px;top:-514px;z-index:3;}
			.mouth1{height:150px;width:2px;background:#666;position:absolute;top:121px;left:312px;}
			.mouth2{width:250px;height:200px;border-bottom:2px solid #666;position:absolute;top:70px;border-radius:50%;
				left:190px;z-index:4;}
			.mustache_1{width:80px;border:1px solid #666;-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);
				-webkit-transform:rotate(30deg);position:absolute;top:135px;left:200px;}
			.mustache_2{width:90px;border:1px solid #666;-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);
				-webkit-transform:rotate(5deg);position:absolute;top:180px;left:180px;}
			.mustache_3{width:90px;border:1px solid #666;-ms-transform:rotate(-20deg);-moz-transform:rotate(-20deg);
				-webkit-transform:rotate(-20deg);position:absolute;top:225px;left:184px;}
			.mustache_4{width:80px;border:1px solid #666;-ms-transform:rotate(150deg);-moz-transform:rotate(150deg);
				-webkit-transform:rotate(150deg);position:absolute;top:135px;left:342px;}
			.mustache_5{width:90px;border:1px solid #666;-ms-transform:rotate(170deg);-moz-transform:rotate(170deg);
				-webkit-transform:rotate(170deg);position:absolute;top:175px;left:355px;}
			.mustache_6{width:90px;border:1px solid #666;-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);
				-webkit-transform:rotate(30deg);position:absolute;top:230px;left:345px;}
			.bozi{width:220px;height:15px;border-radius:5px;border:2px solid #666;background:#db042e;position:absolute;
				top:290px;left:206px;z-index:4;}
			.main{width:222px;height:170px;background:#00a1e9;position:absolute;top:308px;left:207px;z-index:2;}
			.arm{width:85px;height:55px;background:#00a1e9;position:absolute;top:300px;left:132px;border:2px solid #666;}
			.arm{border-bottom-left-radius:60%;
				animation-name:arm;
				animation-duration:1s;
				animation-iteration-count:infinite;
				animation-direction:alternate;
				transform-origin:right;
				}
			@keyframes arm{
				0%{transform:rotateZ(20deg);};
				50%{transform:rotateZ(140deg);};
				100%{transform:rotateZ(20deg);};
			}
 
			.arm_2{width:85px;height:55px;background:#00a1e9;position:absolute;top:320px;left:363px;border:2px solid #666;
				border-bottom-left-radius:60%;-ms-transform:rotate(-80deg);-moz-transform:rotate(-80deg);
				-webkit-transform:rotate(-80deg);z-index:3;border-radius:10% 10% 50% 100%;}
			.hand{width:60px;height:60px;background:#fff;position:absolute;top:289px;left:90px;border:2px solid #666;
				border-radius:50%;z-index:2;
				animation-name:arm2;
				animation-duration:1s;
				animation-iteration-count:infinite;
				animation-direction:alternate;
				transform-origin:right;
				}
			@keyframes arm2{
				0%{transform:rotateZ(50deg);};
				50%{transform:rotateZ(140deg);};
				100%{transform:rotateZ(50deg);};
			}
			.hand_2{width:60px;height:60px;background:#fff;position:absolute;top:361px;left:344px;border:2px solid #666;
				border-radius:50%;z-index:4;}
			.bell_1{width:50px;height:50px;background:#f5e548;position:absolute;top:300px;left:286px;border:2px solid #666;
				border-radius:50%;z-index:3;}
			.bell_2{width:50px;height:10px;background:#f5e548;position:absolute;top:315px;left:286px;border:2px solid #666;
				border-radius:40%;z-index:3;}
			.bell_3{width:12px;height:12px;background:#836855;position:absolute;top:330px;left:304px;border:2px solid #333;
				border-radius:50%;z-index:3;}
			.bell_4{height:10px;position:absolute;top:340px;left:311px;border:1px solid #666;z-index:3;}
			.heaith_1{width:180px;height:135px;background:#fff;border-radius:50%;border:2px solid #666;z-index:2;
				position:absolute;top:305px;left:224px;}
			.heaith_2{width:140px;height:50px;background:#fff;border-radius:0 0 50% 100%;border:2px solid #666;z-index:2;
				position:absolute;top:378px;left:254px;}
			.heaith_3{width:120px;height:80px;background:#00a0e8;border-radius:50%;border:2px solid #666;z-index:2;
				position:absolute;top:415px;left:195px;}
			.heaith_4{width:120px;height:80px;background:#00a0e8;border-radius:50%;border:2px solid #666;z-index:2;
				position:absolute;top:415px;left:318px;}
			.footer{width:60px;height:100px;background:#fff;border-radius:50%;border:2px solid #666;z-index:4;
				position:absolute;top:400px;left:288px;}
		</style>
	</head>
	<body>
		<div id="main">
			<header>
				<nav class="face"></nav>
				<nav class="eye_1"></nav>
				<nav class="eye_11"></nav>
				<nav class="eye_2"></nav>
				<nav class="eye_22"></nav>
				<nav class="nose"></nav>
				<nav class="white"></nav>
				<nav class="mouth1"></nav>
				<nav class="mouth2"></nav>
				<div class="mustache_1"></div>
				<div class="mustache_2"></div>
				<div class="mustache_3"></div>
				<div class="mustache_4"></div>
				<div class="mustache_5"></div>
				<div class="mustache_6"></div>
 
			</header>
			<article>
				<div class="bozi"></div>
				<div class="main"></div>
				<div class="arm"></div>
				<div class="arm_2"></div>
				<div class="hand"></div>
				<div class="hand_2"></div>
				<div class="bell_1"></div>
				<div class="bell_2"></div>
				<div class="bell_3"></div>
				<div class="bell_4"></div>
				<div class="heaith_1"></div>
				<div class="heaith_2"></div>
				<div class="heaith_3"></div>
				<div class="heaith_4"></div>
				<div class="footer"></div>
			</article>
		</div>
	</body>
</html>
发表评论 取消回复

发表评论取消回复
