css3:QQ衰表情

weballan001

浏览: 26904 次
性别:
来自: 郑州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css3
html
工作记录

发现在聊天群里面，用这个表情的很多，最近一直也在了解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>

查看图片附件

分享到：

css3:鼠标hover图片效果 | 百度选车

2011-08-16 10:39
浏览 987
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css3:QQ衰表情

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css3:QQ衰表情

评论

发表评论

相关推荐

胡思乱想 打鱼晒网

淘宝良无限页面交互

纯代码蓝色理想的logo

项目的质和量：西班牙语频道制作思路和规划

祝贺“房多多”网站低调上线

世界工厂首页前端制作 - 首页分解图

CSS3：animation属性实例操作

网页重构：公司网站小面积改版

CSS制作:开心网“发表观点”CSS实现

CSS3：wordpress读者墙

论网易对联广告的效果展示

项目制作流程：请勿野蛮施工

css3:鼠标hover图片效果

百度选车

工作上面的一些积累

项目中的一些小技巧tips记录

CSS 中的 :first-letter

最近访客更多访客>>

胡思乱想打鱼晒网