html程式碼

<div id="dabai">
		<div id="head">
			<div id="eye"></div>
			<div id="eye2"></div>
			<div id="mouth"></div>
		</div>
		<!-- 軀幹 包括心臟 -->
		<div id="torso">
			<div id="heart"></div>
		</div>
		<div id="belly">
			<div id="cover"></div>
		</div>
		<div id="left-arm">
			<div id="l-bigfinger"></div>
			<div id="l-smallfinger"></div>
		</div>
		<div id="right-arm">
			<div id="r-bigfinger"></div>
			<div id="r-smallfinger"></div>
		</div>
		<div id="left-leg"></div>
		<div id="right-leg"></div>
	</div>

 

css3程式碼

<style>
		body{background: #000;}
		#dabai{
			margin: 0 auto;
			height: 600px;
			overflow:hidden;
		}
		#head{
			height: 64px;
			width: 100px;
			border-radius:50%;
			background: #fff;
			margin: 0 auto;
			margin-bottom: -20px;
			border-bottom: 5px solid #e0e0e0;
			z-index:100;
			position: relative;
		}
		#eye,#eye2{
			width: 11px;
			height: 13px;
			background: #282828;
			border-radius:50%;
			position: relative;
			top: 30px;
			left: 27px;

			transform:rotate(8deg);
		}
		#eye2{
			transform:rotate(-8deg);
			left: 69px;
			top: 17px;
		}
		#mouth{
			width: 38px;
			height: 1.5px;
			background: #282828;
			position: relative;
			left: 34px;
			top: 10px;
		}
		#torso,#belly{
			margin: 0 auto;
			height: 200px;
			width: 200px;
			background: #fff;
			border-radius:47%;

			border:5px solid #e0e0e0;
			border-top:none;
			z-index:1;
		}
		#belly{
			height: 300px;
			width: 245px;
			margin-top: -140px;
			z-index:5;
		}
		#cover{
			width: 190px;
			height: 150px;
			background: #fff;
			margin: 0 auto;
			position: relative;
			top: -20px;
			border-radius:50%;
		}
		#heart{
			width: 25px;
			height: 25px;
			border-radius:50%;
			position: relative;
			z-index:111;
			box-shadow:2px 5px 2px #ccc inset;
			right: -115px;
			top: 40px;
			border:1px solid #ccc;
		}
		#left-arm,#right-arm{
			height: 270px;
			width: 120px;
			border-radius:50%;
			background: #fff;
			margin: 0 auto;
			position: relative;
			top: -350px;
			left: -100px;
			transform:rotate(20deg);
			z-index:-1;
		}
		#right-arm{
			transform:rotate(-20deg);
			left: 100px;
			top: -620px;
		}
		#l-bigfinger,#r-bigfinger{
			height: 50px;
			width: 20px;
			border-radius:50%;
			background: #fff;
			position: relative;
			top: 250px;
			left: 50px;
			transform:rotate(-50deg);
		}
		#r-bigfinger{
			left: 50px;
			transform:rotate(50deg);
		}
		#l-smallfinger,#r-smallfinger{
			height: 35px;
			width: 15px;
			border-radius:50%;
			background: #fff;
			position: relative;
			top: 195px;
			left: 66px;
			transform:rotate(-40deg);
		}
		#r-smallfinger{
			transform:rotate(40deg);
			left: 37px;
		}
		#left-leg,#right-leg{
			height: 170px;
			width: 90px;
			border-radius: 40% 30% 10px 45%;
			background: #fff;
			position: relative;
			top: -640px;
			left: -45px;
			transform:rotate(-1deg);
			margin: 0 auto;
			z-index:-2;
		}
		#left-leg{
			animation:lmove 5s infinite;
		}
		#right-leg{
			position: relative;
			top: -810px;
			left: 50px;
			transform:rotate(-210deg);
			animation:rmove 5s infinite;
		}
		@-webkit-keyframes lmove{
			0%{transform:rotate(40deg);}
			25%{transform:rotate(-1deg);}
			75%{transform:rotate(40deg);}
			100%{transform:rotate(-1deg);}
		}
		@-webkit-keyframes rmove{
			0%{transform:rotate(-170deg);}
			25%{transform:rotate(-210deg);}
			75%{transform:rotate(-170deg);}
			100%{transform:rotate(-211deg);}
		}
	</style>

 

主要知識點：熟悉掌握css3