发现在聊天群里面,用这个表情的很多,最近一直也在了解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">
</div>
<!--左眼睛结束-->
<!--右眼睛开始-->
<div class="righteye">
</div>
<!--右眼睛结束-->
<div class="tear">
<p> </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>