1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CSS3logo</title>
  5. <style type="text/css">
  6. html, body, div, img {
  7. margin: 0;
  8. padding: 0;
  9. }
  10.  
  11. #box {
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. }
  16.  
  17. #head {
  18. position: absolute;
  19. left: 135px;
  20. top: 10px;
  21. background: #121214;
  22. width: 127px;
  23. height: 134px;
  24. border-radius: 50%/49%;
  25. z-index: 1;
  26. }
  27.  
  28. #body {
  29. position: absolute;
  30. left: 128px;
  31. top: 68px;
  32. background: #121214;
  33. width: 141px;
  34. height: 138px;
  35. border-radius: 50%;
  36. }
  37.  
  38. #belly {
  39. position: absolute;
  40. left: 144px;
  41. top: 79px;
  42. background: #fbfbfb;
  43. width: 110px;
  44. height: 123px;
  45. border-radius: 50%;
  46. }
  47.  
  48. .foot {
  49. position: absolute;
  50. top: 186px;
  51. background: #febf18;
  52. width: 63px;
  53. height: 30px;
  54. border-radius: 50%;
  55. box-shadow: 0 3px #dc9111;
  56. z-index: -1;
  57. }
  58.  
  59. #leftFoot {
  60. left: 132px;
  61. transform: rotate(-3deg);
  62. }
  63.  
  64. #rightFoot {
  65. left: 202px;
  66. transform: rotate(3deg);
  67. }
  68.  
  69. .eye {
  70. position: absolute;
  71. top: 44px;
  72. width: 24px;
  73. height: 35px;
  74. background: #fff;
  75. border-radius: 50%;
  76. z-index: 2;
  77. }
  78.  
  79. #leftEye {
  80. left: 170px;
  81. }
  82.  
  83. #rightEye {
  84. left: 203px;
  85. }
  86.  
  87. #leftEyeBall {
  88. position: absolute;
  89. left: 180px;
  90. top: 53px;
  91. width: 6px;
  92. height: 14px;
  93. border-radius: 50%;
  94. background: #171718;
  95. border: solid 2px #040305;
  96. z-index: 2;
  97. }
  98.  
  99. #leftEyeBall > div {
  100. position: absolute;
  101. left: 2px;
  102. top: 1px;
  103. width: 3px;
  104. height: 7px;
  105. border-radius: 50%;
  106. background: #fff;
  107. }
  108.  
  109. #rightEyeBall {
  110. position: absolute;
  111. left: 206px;
  112. top: 53px;
  113. width: 13px;
  114. height: 13px;
  115. overflow: hidden;
  116. z-index: 2;
  117. }
  118.  
  119. #rightEyeBall > div {
  120. width: 7px;
  121. height: 14px;
  122. border-radius: 50%;
  123. border: solid 3px #040305;
  124. }
  125.  
  126. .hand {
  127. position: absolute;
  128. top: 130px;
  129. width: 70px;
  130. height: 23px;
  131. border-radius: 50%;
  132. background: #121214;
  133. }
  134.  
  135. #leftHand {
  136. left: 91px;
  137. transform: rotate(-70deg);
  138. }
  139.  
  140. #rightHand {
  141. left: 235px;
  142. transform: rotate(70deg);
  143. }
  144.  
  145. #scarf {
  146. position: absolute;
  147. left: 123px;
  148. top: 89px;
  149. width: 148px;
  150. height: 55px;
  151. z-index: 2;
  152. border: solid 1px transparent;
  153. overflow: hidden;
  154. }
  155.  
  156. #scarf1 {
  157. position: absolute;
  158. left: 152px;
  159. top: 117px;
  160. width: 27px;
  161. height: 50px;
  162. z-index: 2;
  163. background: #e32a0e;
  164. border-bottom-right-radius: 5px;
  165. border-bottom-left-radius: 6px;
  166. transform: skewY(8deg) rotate(2deg);
  167. }
  168.  
  169. #scarf > #circle {
  170. position: absolute;
  171. left: -40px;
  172. top: -233px;
  173. width: 186px;
  174. height: 243px;
  175. border-radius: 50%;
  176. border: solid 22px #e32a0e;
  177. }
  178.  
  179. #scarf > .clip {
  180. position: absolute;
  181. top: -30px;
  182. width: 20px;
  183. height: 55px;
  184. background: #fff;
  185. }
  186.  
  187. #leftClip {
  188. left: -7px;
  189. transform: rotate(20deg);
  190. }
  191.  
  192. #rightClip {
  193. left: 136px;
  194. transform: rotate(-20deg);
  195. }
  196.  
  197. #mouth {
  198. position: absolute;
  199. left: 157px;
  200. top: 84px;
  201. width: 83px;
  202. height: 22px;
  203. border-radius: 50%;
  204. background: #fdbe18;
  205. z-index: 2;
  206. }
  207.  
  208. #mouth > #m_child_0 {
  209. margin: 0 auto;
  210. width: 76px;
  211. height: 24px;
  212. border-radius: 50%;
  213. background: #fdbe18;
  214. }
  215.  
  216. #mouth #m_child_1 {
  217. margin: 0 auto;
  218. width: 60px;
  219. height: 27px;
  220. border-radius: 50%;
  221. background: #fdbe18;
  222. }
  223.  
  224. #mouth #m_child_2 {
  225. margin: 0 auto;
  226. width: 50px;
  227. height: 29px;
  228. border-radius: 50%;
  229. background: #fdbe18;
  230. }
  231.  
  232. #mouth #m_child_3 {
  233. position: absolute;
  234. left: 9px;
  235. top: 2px;
  236. width: 66px;
  237. height: 20px;
  238. overflow: hidden;
  239. border-radius: 50%;
  240. }
  241.  
  242. #mouth #m_child_4 {
  243. position: absolute;
  244. left: -1px;
  245. top: -9px;
  246. width: 68px;
  247. height: 26px;
  248. border-radius: 50%;
  249. box-shadow: 0px 1px 1px #8f3201;
  250. background: #fdbe18;
  251. }
  252.  
  253. #mouth #m_child_5 {
  254. position: absolute;
  255. left: 21px;
  256. top: 2px;
  257. width: 42px;
  258. height: 22px;
  259. border-radius: 50%;
  260. background: #8f3201;
  261. }
  262.  
  263. #mouth #m_child_6 {
  264. margin: 1px auto;
  265. width: 30px;
  266. height: 23px;
  267. border-radius: 50%;
  268. background: #8f3201;
  269. }
  270. </style>
  271. </head>
  272. <body>
  273. <div id="box">
  274. <div id="head"></div>
  275. <div id="body"></div>
  276. <div id="belly"></div>
  277. <div id="leftFoot" class="foot"></div>
  278. <div id="rightFoot" class="foot"></div>
  279. <div id="leftEye" class="eye"></div>
  280. <div id="rightEye" class="eye"></div>
  281. <div id="leftEyeBall"><div></div></div>
  282. <div id="rightEyeBall"><div></div></div>
  283. <div id="leftHand" class="hand"></div>
  284. <div id="rightHand" class="hand"></div>
  285. <div id="scarf">
  286. <div id="circle"></div>
  287. <div id="leftClip" class="clip"></div>
  288. <div id="rightClip" class="clip"></div>
  289. </div>
  290. <div id="scarf1"></div>
  291. <div id="mouth">
  292. <div id="m_child_0">
  293. <div id="m_child_1">
  294. <div id="m_child_2"></div>
  295. </div>
  296. </div>
  297. <div id="m_child_5">
  298. <div id="m_child_6"></div>
  299. </div>
  300. <div id="m_child_3">
  301. <div id="m_child_4"></div>
  302. </div>
  303. </div>
  304. </div>
  305. </body>
  306. </html>

QQlogo

纯css实现qqlogo图的更多相关文章

  1. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 纯css3 轮播图 利用keyframes

    效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time  与每帧延延迟的时间的交错:要让 ...

  3. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  5. 纯css就能实现可点击切换的轮播图,feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

  6. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  7. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  8. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  9. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

随机推荐

  1. jQuery radio的取值与赋值

    取值: $("input[name='radioName']:checked").val(); 赋值: $("input[name='radioName'][value= ...

  2. JavaScript中的this

    本文尽量避免概念性的讲解,那样太抽象 所以下面以一些简单的例子,从易到难对this的用法总结 1.方法中的this会指向当前执行该方法的对象 如: var name = "window&qu ...

  3. 定时Job在IIS中潜在危险-IIS 定期回收

    引言 有时我们会在IIS中启用一些定时服务,但是你必须清楚IIS会定期回收Asp.net的应用程序的.首先来看IIS啥时候回收APPDomain.   APPDomain 回收时机 There are ...

  4. BZOJ 2119: 股市的预测 [后缀数组 ST表]

    2119: 股市的预测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 331  Solved: 153[Submit][Status][Discuss ...

  5. shell之sort命令

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  6. mono for android Json 上传文件

    void button_Click(object sender, EventArgs e) { string Url = "上传地址,服务器端负责接收"; byte[] fbyte ...

  7. 用命令行工具创建 NuGet 程序包

    NuGet.exe 下载地址 本文翻译自: https://docs.nuget.org/Create/Creating-and-Publishing-a-Package https://docs.n ...

  8. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

  9. ABP源码分析二十三:Authorization

    Permission:用于定义一个Permission,一个permission可以包含多个子Permission. PermissionDictionary:继承自Dictionary<str ...

  10. select,epoll,poll比较

    介绍和比较 http://www.cnblogs.com/maociping/p/5132583.html 比较 http://www.dataguru.cn/thread-336032-1-1.ht ...