纯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属性,所以我们需要 ...
随机推荐
- jQuery radio的取值与赋值
取值: $("input[name='radioName']:checked").val(); 赋值: $("input[name='radioName'][value= ...
- JavaScript中的this
本文尽量避免概念性的讲解,那样太抽象 所以下面以一些简单的例子,从易到难对this的用法总结 1.方法中的this会指向当前执行该方法的对象 如: var name = "window&qu ...
- 定时Job在IIS中潜在危险-IIS 定期回收
引言 有时我们会在IIS中启用一些定时服务,但是你必须清楚IIS会定期回收Asp.net的应用程序的.首先来看IIS啥时候回收APPDomain. APPDomain 回收时机 There are ...
- BZOJ 2119: 股市的预测 [后缀数组 ST表]
2119: 股市的预测 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 331 Solved: 153[Submit][Status][Discuss ...
- shell之sort命令
1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...
- mono for android Json 上传文件
void button_Click(object sender, EventArgs e) { string Url = "上传地址,服务器端负责接收"; byte[] fbyte ...
- 用命令行工具创建 NuGet 程序包
NuGet.exe 下载地址 本文翻译自: https://docs.nuget.org/Create/Creating-and-Publishing-a-Package https://docs.n ...
- CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...
- ABP源码分析二十三:Authorization
Permission:用于定义一个Permission,一个permission可以包含多个子Permission. PermissionDictionary:继承自Dictionary<str ...
- select,epoll,poll比较
介绍和比较 http://www.cnblogs.com/maociping/p/5132583.html 比较 http://www.dataguru.cn/thread-336032-1-1.ht ...