`
weballan001
  • 浏览: 26917 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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>
  • 大小: 9.4 KB
分享到:
评论

相关推荐

    人民邮电(图灵)-CSS重构:样式表性能调优

    人民邮电(图灵)-CSS重构:样式表性能调优.201711.epub 人民邮电(图灵)-CSS重构:样式表性能调优

    CSS Tools: Reset CSS

    The goal of a reset stylesheet is to reduce browser inconsistencies in ... Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

    HTML5 CSS3 : 3D立方体旋转动画实例源码

    CSS3的3D变换是实现动态效果的关键。`transform`属性可以对元素应用2D或3D转换,包括旋转(`rotateX`, `rotateY`, `rotateZ`)、平移(`translateX`, `translateY`, `translateZ`)和缩放(`scaleX`, `scaleY`, `...

    HTML5 CSS3 :canvas 模拟实现电子彩票刮刮乐实例代码

    在这个“HTML5 CSS3:canvas模拟实现电子彩票刮刮乐实例代码”中,我们将深入探讨如何利用Canvas API创建一个互动式的刮刮乐彩票效果。 首先,Canvas的基本用法是通过`&lt;canvas&gt;`标签在HTML文档中创建一个画布,然后...

    HTML5 CSS3 :无插件拖拽上传图片实例源码

    在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域,...

    CSS3 SVG卡通QQ表情特效.zip

    【CSS3 SVG卡通QQ表情特效】是一个集合了CSS3技术和SVG元素来创建具有动画效果的卡通QQ表情的项目。这个项目不仅提供了独特的视觉体验,而且由于其基于标准的Web技术,可以在现代浏览器中流畅运行,同时也为开发者...

    HTML5 CSS3 : 进度条的实现实例源码

    默认情况下,浏览器会提供一个简单的样式,但我们可以使用CSS3来定制外观。 CSS3提供了丰富的选择器和样式规则,让我们可以完全自定义进度条的样式。例如,我们可以通过以下方式改变进度条的颜色和宽度: ```css ...

    纯CSS3绘制可爱的青蛙表情

    "纯CSS3绘制可爱的青蛙表情"这个主题,意味着我们将探讨如何仅使用CSS3来创建一个有趣的图形——一只可爱的青蛙表情。这种方法通常涉及使用CSS3的高级特性,如伪元素、渐变、变换、动画以及边框半径等。 首先,我们...

    css3绘图卡通人物表情动画特效

    本话题聚焦于“CSS3绘图卡通人物表情动画特效”,这是一项利用CSS3特性来创建动态、生动的卡通角色表情的技术。 首先,让我们了解CSS3绘图的基本概念。CSS3提供了`border-radius`、`box-shadow`、`linear-gradient`...

    《CSS3实战:开发与设计》源码

    本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一...

    纯CSS3表情图片旋转动画特效.zip

    【纯CSS3表情图片旋转动画特效】是一种利用CSS3特性实现的动态视觉效果,它将卡通表情图片设计成可旋转的动画,为网页增添趣味性和互动性。在现代网页设计中,这种效果常用于吸引用户的注意力,提升用户体验,特别是...

    纯CSS3青蛙表情符号动画特效

    本案例中的“纯CSS3青蛙表情符号动画特效”是CSS3技术应用的一个生动示例,它展示了CSS3在创建动态、交互式用户体验方面的潜力。 首先,我们来看“青蛙表情符号”。这些表情符号的设计通常是为了传达情感或反应,...

    CSS框架(如Bootstrap, TailwindCSS):TailwindCSS快速上手.docx

    CSS框架(如Bootstrap, TailwindCSS):TailwindCSS快速上手.docx

    CSS框架(如Bootstrap, Tailwind CSS):CSS框架与性能优化.docx

    CSS框架(如Bootstrap, Tailwind CSS):CSS框架与性能优化.docx

    《图解CSS3核心技术与案例实战》PDF+源代码

    《图解CSS3核心技术与案例实战》将CSS3特性按模块功能分类,通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。能帮助从事CSS3开发的前端工程师 系统掌握CSS3的各项知识,提升技术水平和业务能力。  

    CSS3非常可爱的动态表情特效.zip

    在“CSS3非常可爱的动态表情特效.zip”这个压缩包中,包含了一个使用CSS3实现的仿Facebook表情包图标动画特效。这个特效不仅为用户界面增添了趣味性,还能提升用户体验,尤其在社交网络或聊天应用中。 首先,让我们...

    CSS框架(如Bootstrap,TailwindCSS):从设计稿到代码:CSS框架实战应用.docx

    CSS框架(如Bootstrap,TailwindCSS):从设计稿到代码:CSS框架实战应用.docx

    CSS框架(如Bootstrap,TailwindCSS):高级CSS框架项目构建与调试.docx

    CSS框架(如Bootstrap,TailwindCSS):高级CSS框架项目构建与调试.docx

    CSS3 SVG卡通QQ表情特效

    本文将深入探讨“CSS3 SVG卡通QQ表情特效”这一主题,结合其标题、描述和标签,我们将详细了解如何利用这两种技术来创建动态且富有表现力的卡通表情。 首先,CSS3(层叠样式表第三版)是Web样式语言,用于定义HTML...

Global site tag (gtag.js) - Google Analytics