纯css实现qqlogo图
<!doctype html>
<html>
<head>
<title>CSS3logo</title>
<style type="text/css">
html, body, div, img {
margin: 0;
padding: 0;
} #box {
position: absolute;
left: 0;
top: 0;
} #head {
position: absolute;
left: 135px;
top: 10px;
background: #121214;
width: 127px;
height: 134px;
border-radius: 50%/49%;
z-index: 1;
} #body {
position: absolute;
left: 128px;
top: 68px;
background: #121214;
width: 141px;
height: 138px;
border-radius: 50%;
} #belly {
position: absolute;
left: 144px;
top: 79px;
background: #fbfbfb;
width: 110px;
height: 123px;
border-radius: 50%;
} .foot {
position: absolute;
top: 186px;
background: #febf18;
width: 63px;
height: 30px;
border-radius: 50%;
box-shadow: 0 3px #dc9111;
z-index: -1;
} #leftFoot {
left: 132px;
transform: rotate(-3deg);
} #rightFoot {
left: 202px;
transform: rotate(3deg);
} .eye {
position: absolute;
top: 44px;
width: 24px;
height: 35px;
background: #fff;
border-radius: 50%;
z-index: 2;
} #leftEye {
left: 170px;
} #rightEye {
left: 203px;
} #leftEyeBall {
position: absolute;
left: 180px;
top: 53px;
width: 6px;
height: 14px;
border-radius: 50%;
background: #171718;
border: solid 2px #040305;
z-index: 2;
} #leftEyeBall > div {
position: absolute;
left: 2px;
top: 1px;
width: 3px;
height: 7px;
border-radius: 50%;
background: #fff;
} #rightEyeBall {
position: absolute;
left: 206px;
top: 53px;
width: 13px;
height: 13px;
overflow: hidden;
z-index: 2;
} #rightEyeBall > div {
width: 7px;
height: 14px;
border-radius: 50%;
border: solid 3px #040305;
} .hand {
position: absolute;
top: 130px;
width: 70px;
height: 23px;
border-radius: 50%;
background: #121214;
} #leftHand {
left: 91px;
transform: rotate(-70deg);
} #rightHand {
left: 235px;
transform: rotate(70deg);
} #scarf {
position: absolute;
left: 123px;
top: 89px;
width: 148px;
height: 55px;
z-index: 2;
border: solid 1px transparent;
overflow: hidden;
} #scarf1 {
position: absolute;
left: 152px;
top: 117px;
width: 27px;
height: 50px;
z-index: 2;
background: #e32a0e;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 6px;
transform: skewY(8deg) rotate(2deg);
} #scarf > #circle {
position: absolute;
left: -40px;
top: -233px;
width: 186px;
height: 243px;
border-radius: 50%;
border: solid 22px #e32a0e;
} #scarf > .clip {
position: absolute;
top: -30px;
width: 20px;
height: 55px;
background: #fff;
} #leftClip {
left: -7px;
transform: rotate(20deg);
} #rightClip {
left: 136px;
transform: rotate(-20deg);
} #mouth {
position: absolute;
left: 157px;
top: 84px;
width: 83px;
height: 22px;
border-radius: 50%;
background: #fdbe18;
z-index: 2;
} #mouth > #m_child_0 {
margin: 0 auto;
width: 76px;
height: 24px;
border-radius: 50%;
background: #fdbe18;
} #mouth #m_child_1 {
margin: 0 auto;
width: 60px;
height: 27px;
border-radius: 50%;
background: #fdbe18;
} #mouth #m_child_2 {
margin: 0 auto;
width: 50px;
height: 29px;
border-radius: 50%;
background: #fdbe18;
} #mouth #m_child_3 {
position: absolute;
left: 9px;
top: 2px;
width: 66px;
height: 20px;
overflow: hidden;
border-radius: 50%;
} #mouth #m_child_4 {
position: absolute;
left: -1px;
top: -9px;
width: 68px;
height: 26px;
border-radius: 50%;
box-shadow: 0px 1px 1px #8f3201;
background: #fdbe18;
} #mouth #m_child_5 {
position: absolute;
left: 21px;
top: 2px;
width: 42px;
height: 22px;
border-radius: 50%;
background: #8f3201;
} #mouth #m_child_6 {
margin: 1px auto;
width: 30px;
height: 23px;
border-radius: 50%;
background: #8f3201;
}
</style>
</head>
<body>
<div id="box">
<div id="head"></div>
<div id="body"></div>
<div id="belly"></div>
<div id="leftFoot" class="foot"></div>
<div id="rightFoot" class="foot"></div>
<div id="leftEye" class="eye"></div>
<div id="rightEye" class="eye"></div>
<div id="leftEyeBall"><div></div></div>
<div id="rightEyeBall"><div></div></div>
<div id="leftHand" class="hand"></div>
<div id="rightHand" class="hand"></div>
<div id="scarf">
<div id="circle"></div>
<div id="leftClip" class="clip"></div>
<div id="rightClip" class="clip"></div>
</div>
<div id="scarf1"></div>
<div id="mouth">
<div id="m_child_0">
<div id="m_child_1">
<div id="m_child_2"></div>
</div>
</div>
<div id="m_child_5">
<div id="m_child_6"></div>
</div>
<div id="m_child_3">
<div id="m_child_4"></div>
</div>
</div>
</div>
</body>
</html>
QQlogo
纯css实现qqlogo图的更多相关文章
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 纯css3 轮播图 利用keyframes
效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time 与每帧延延迟的时间的交错:要让 ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 纯CSS手动滑动轮播图（隐藏滚动条）
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 纯CSS打造银色MacBook Air（完整版）
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
随机推荐
- (转)从0开始搭建SQL Server AlwaysOn 第一篇（配置域控+域用户DCADMIN）
原文地址: http://www.cnblogs.com/lyhabc/p/4678330.html 实验环境: 准备工作 软件准备 (1) SQL Server 2012 (2) Windows S ...
- 检查sql执行效率
SELECT SUBSTRING(ST.text, ( QS.statement_start_offset / 2 ) + 1, ( ( CASE statem ...
- 使用Nginx反向代理 让IIS和Tomcat等多个站点一起飞
使用Nginx 让IIS和Tomcat等多个站点一起飞 前言: 养成一个好习惯,解决一个什么问题之后就记下来,毕竟“好记性不如烂笔头”. 这样也能帮助更多的人 不是吗? 最近闲着没事儿瞎搞,自己在写一 ...
- Linux设备管理（四）_从sysfs回到ktype
sysfs是一个基于ramfs的文件系统,在2.6内核开始引入,用来导出内核对象(kernel object)的数据.属性到用户空间.与同样用于查看内核数据的proc不同,sysfs只关心具有层次结构 ...
- Dancing Links and Exact Cover
1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...
- CYQ.Data V5 分布式自动化缓存设计介绍
前方: 其实完成这个功能之前,我就在思考:是先把想法写了来,和大伙讨论讨论后再实现,还是实现后再写文论述自己的思维. 忽然脑后传来一个声音说:你发文后会进入发呆阶段. 所以还是静下心,让我轻轻地把代码 ...
- 最牛的打字效果JS插件 typing.js
最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...
- 不得不知的CLR中的GC
引言 GC 作为CLR的垃圾回收器,让程序员可以把更多的关注度放在业务上而不是垃圾回收(内存回收)上.其实很多语言也有类似的东东, 如Java也有JIT 等等 GC基本概念 垃圾回收机制的算法有好多种 ...
- 一种简单,轻量,灵活的C#对象转Json对象的方案
简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 补充:修正无法处理可空值类型的bug 首先我将这个类称之为JsonBuilder,我希望它以 ...
- Entity Framework 6 Recipes 2nd Edition（10-5）译 -> 在存储模型中使用自定义函数
10-5. 在存储模型中使用自定义函数 问题 想在模型中使用自定义函数,而不是存储过程. 解决方案 假设我们数据库里有成员(members)和他们已经发送的信息(messages) 关系数据表,如Fi ...