css3绘制出可爱的猫头鹰图像 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3猫头鹰制作</title>
		<style type="text/css">
			.mini-owl{position: absolute;top: 3rem;left: 50%;}
			.mini-owl{margin-left: -105px;width: 250px;height: 240px;background-color: #f2b22e;border-radius: 60% 60% 70% 70%;}
			.mini-owl:before,.mini-owl:after{
			  content: "";
			  display: block;
			  position: absolute;
			  width: 0;
			  height: 0;
			  border-top: 15px solid transparent;
			  border-left: 90px solid #f2b22e;
			  border-bottom: 50px solid transparent;
			  border-radius: 10% 0 0 0;
			}
			.mini-owl:before{top: 13px;left: 10px;-webkit-transform: rotate(10deg);}
			.mini-owl:after{top: 24px;right: -13px;-webkit-transform: rotate(-110deg) scale(-1);}
		/*腹部样式*/	
			.belly{position: absolute;left: 50%; bottom: 0;}
			.belly{margin-left: -80px;width: 160px;height: 100px;border-radius: 60% 60% 70% 70%;}
			.belly{ 
			  background-color: #f3cc74;
			  background-image: -webkit-radial-gradient(#f2b22e 20%, transparent 24%),
			                    -webkit-radial-gradient(#f2b22e 20%, transparent 24%);
			  background-image: radial-gradient(#f2b22e 20%, transparent 24%),
			                    radial-gradient(#f2b22e 20%, transparent 24%);
			  background-size: 30px 30px;
			  background-position: 0 0, 15px 15px;
			}
		/*眼睛部分样式*/	
			.eye{z-index:9999;position: absolute; top:55px;width:80px;height: 80px; border-radius: 50%; background: white;}
			.eye:after {
			  content: "";
			  background: black;
			  width: 40px;
			  height: 40px;
			  border-radius: 50%;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  margin: -20px;
			}			
			.left-eye{left: 30px;}
			.right-eye{right: 30px;}
		/*鼻子样式*/
			.beak{position: absolute;top:84px;left: 50px;}
			.beak{width: 0;height: 0;border-left: 75px solid transparent;border-right: 75px solid transparent;border-top: 90px solid #e27326;}
			.beak{
				-webkit-transform: scale(.25);
			    transform: scale(.25);
			}
		/*翅膀部分样式*/	
			.wings{z-index: -1;position: absolute;top: 90px;width: 40px;height: 100px;background: #f2b22e;border-radius: 50%;}
			.left-wing {left: -5px;-webkit-transform: rotate(50deg);}
			.right-wing {-webkit-transform: rotate(-50deg);right: -5px;}
		/*脚部样式*/	
			.left-foot, .right-foot {
			  position: absolute;
			  bottom: 1px;
			  height: 25px;
			  width: 12px;
			  background-color: #e27326;
			  border-radius: 50%;
			}
			
			.left-foot{left: 45px;}
			.right-foot{right: 45px;}
			
			.left-foot:before,.right-foot:before, 
			.left-foot:after, .right-foot:after {
			  content: '';
			  position: absolute;
			  border-radius: 50%;
			  background: #e27326;
			  width: 12px;
			}
			
			.left-foot:before,.right-foot:before {left: -8px;}
			.left-foot:after,.right-foot:after { right: -8px;}
			.left-foot:before,.right-foot:after {bottom: 8px;height: 24px;}
			.left-foot:after,.right-foot:before { bottom: 0px; height: 20px;}

		</style>
	</head>
	<body>
		<div class="mini-owl">
			<div class="body">
			    <div class="belly"></div>
			    <div class="eye left-eye"></div>
			    <div class="eye right-eye"></div>
			    <div class="beak"></div>
			</div> 
			<div class="wings left-wing"></div>
			<div class="wings right-wing"></div>
			<div class="left-foot"></div>
			<div class="right-foot"></div> 
		</div>
	</body>
</html>

　　

posted on 2017-12-07 14:38  木之子梦之蝶  阅读(202)  评论(0)    收藏  举报

导航