css3:QQ衰神情 _HTML/CSS

css3:QQ衰表情

发现在聊天群里面，用这个表情的很多，最近一直也在了解CSS3的新属性，觉的应该用CSS3把它画出来，于是就有了这个页面。主要应用伪类:before :after ?CSS3新属性 transform box-shadow border-radius?

您可以狠狠地点击这里：css3:QQ衰表情demo

<!DOCTYPE html>
<html>

<head>
<meta  charset="utf-8" />
<title>无标题 1</title>
<style>
body{
	font-family:\5B8B\4F53,Arial Narrow,arial,serif;font-size:12px;color:#000;line-height:1.5em;background:#fff;padding:50px 0;
}
#main{
	margin:0 auto;
	width:300px;
	height:300px;
	background:#000;
	position:relative;
	border-radius:300px;
	box-shadow:0px 0px 10px #B7E5A5;
}
#main:before,#main:after{
	content:"";
	position:absolute;
	top:0;
	width:0;
	height:0;
	border-style:solid;
	border-color:#000 transparent;
	border-width:0 40px 70px 40px;
	display:block;
}
#main:before{
	left:-25px;
	-moz-transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	transform:rotate(-50deg);
}
#main:after{
	right:-25px;
	-moz-transform:rotate(50deg);
	-webkit-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
#main.hide *{display: none;}
.lefteye,.righteye{
	position:absolute;
	top:55px;
	width:129px;
	height:129px;
	background:#fff;
	border-radius:128px;
	z-index:99;
}
.lefteye{
	left:22px;
}
.righteye{
	right:22px;
}
.lefteye:before,.righteye:before{
	content:"";
	position:absolute;
	top:52px;
	width:20px;
	height:20px;
	background:#000;
	display:block;
	border-radius:20px;
}
.lefteye:before{
	right:2px;
}
.righteye:before{
	left:2px;
}
.tear{
	position:absolute;
	right:32px;
	bottom:77px;
	width:26px;
	height:32px;
	background:#fff;
	border-radius:26px;
}
.tear p{
	position:absolute;
	left:4px;
	top:-30px;
	width:16px;
	height:45px;
	background:#fff;
	z-index:1;
}
.tear:before{
	content:"";
	position:absolute;
	left:2px;
	top:-24px;
	z-index:15;
	width:50px;
	height:50px;
	background:#000;
	border-bottom-right-radius:50px;
	-webkit-transform:translate(-39px, 8px) rotate(-13deg);
	-moz-transform:translate(-39px, 8px) rotate(-13deg);
	-ms-transform:translate(-39px, 8px) rotate(-13deg);
	-o-transform:translate(-39px, 8px) rotate(-13deg);
	transform:translate(-39px, 8px) rotate(-13deg);
}
.tear:after{
	content:"";
	position:absolute;
	right:-57px;
	top:-32px;
	z-index:15;
	width:33px;
	height:33px;
	background:#000;
	border-bottom-left-radius:30px;
	-webkit-transform:translate(-39px, 8px) rotate(23deg);
	-moz-transform:translate(-39px, 8px) rotate(23deg);
	-ms-transform:translate(-39px, 8px) rotate(23deg);
	-o-transform:translate(-39px, 8px) rotate(23deg);
	transform:translate(-39px, 8px) rotate(23deg);
}

</style>
</head>

<body>

<!--主体开始-->
<div id="main">
	<!--左眼睛开始-->
	<div class="lefteye">
		&nbsp;
	</div>
	<!--左眼睛结束-->

	<!--右眼睛开始-->
	<div class="righteye">
		&nbsp;
	</div>
	<!--右眼睛结束-->

	<div class="tear">
		<p>&nbsp;</p>
	</div>
</div>
<!--主体结束-->
<script>
	var main = document.getElementById('main');
	function blink(){
		main.className = 'hide';
		setTimeout(function(){main.className = '';}, 120);
	}

	(function(){
		var func = arguments.callee;
		setTimeout(blink, 1000);
		setTimeout(blink, 1200);
		setTimeout(func, 3000)
	})();
</script>

</body>

</html>