您现在的位置是：网站首页> 编程资料编程资料

HTML5+CSS3实现机器猫纯css3绘制的哆啦a梦机器猫头像效果源码

2021-08-31 961人已围观

简介 本文给大家分享一段html5和css3实现的机器猫功能，代码简单易懂非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>机器猫title>  
  6. <style type="text/css">  
  7. * {   
  8. margin: 0;   
  9. padding: 0;   
  10. }   
  11. .whole {   
  12. width: 800px;   
  13. margin: 20px auto;   
  14. /*border: 2px solid yellow;*/   
  15. background-color: white;   
  16. position: relative;   
  17. }   
  18. .head {   
  19. margin: 0 auto;   
  20. position: relative;   
  21. width: 500px;   
  22. height: 440px;   
  23. background-color: #00b7e7;   
  24. border-radius: 220px;   
  25. border: 1px solid red;   
  26. }   
  27. .eye .left_eye,   
  28. .eye .right_eye {   
  29. width: 100px;   
  30. height: 130px;   
  31. background-color: white;   
  32. border: 2px solid black;   
  33. border-radius: 50px;   
  34. position: absolute;   
  35. top: 50px;   
  36. z-index: 3;   
  37. }   
  38. .eye .LeyeBall,   
  39. .eye .ReyeBall {   
  40. width: 20px;   
  41. height: 20px;   
  42. background: black;   
  43. border-radius: 10px;   
  44. position: absolute;   
  45. top: 65px;   
  46. }   
  47. .eye .left_eye {   
  48. left: 146px;   
  49. }   
  50. .eye .right_eye {   
  51. left: 250px;   
  52. }   
  53. .eye .LeyeBall {   
  54. right: 10px;   
  55. }   
  56. .eye .ReyeBall {   
  57. left: 10px;   
  58. }   
  59. .face {   
  60. position: relative;   
  61. z-index: 2;   
  62. }   
  63. .face .feature {   
  64. width: 400px;   
  65. height: 320px;   
  66. border-radius: 160px;   
  67. position: absolute;   
  68. top: 100px;   
  69. left: 50px;   
  70. background: white;   
  71. }   
  72. .face .nose {   
  73. width: 45px;   
  74. height: 50px;   
  75. border-radius: 23px;   
  76. background-color: #cf3318;   
  77. border: 2px solid black;   
  78. position: absolute;   
  79. top: 165px;   
  80. left: 225px;   
  81. z-index: 3;   
  82. }   
  83. .face .Nline {   
  84. width: 3px;   
  85. height: 160px;   
  86. background: black;   
  87. position: absolute;   
  88. top: 218px;   
  89. left: 248px;   
  90. z-index: 3;   
  91. }   
  92. .face .mouth {   
  93. width: 280px;   
  94. height: 280px;   
  95. border-bottom: 5px solid black;   
  96. border-radius: 140px;   
  97. position: absolute;   
  98. top: 98px;   
  99. left: 105px;   
  100. }   
  101. .face .mustache .MutR_higher {   
  102. width: 80px;   
  103. height: 2px;   
  104. background: black;   
  105. position: absolute;   
  106. top: 220px;   
  107. left: 295px;   
  108. z-index: 2;   
  109. }   
  110. .face .mustache .MutR_middle {   
  111. width: 80px;   
  112. height: 2px;   
  113. background: black;   
  114. position: absolute;   
  115. top: 240px;   
  116. left: 295px;   
  117. z-index: 2;   
  118. }   
  119. .face .mustache .MutR_lower {   
  120. width: 80px;   
  121. height: 2px;   
  122. background: black;   
  123. position: absolute;   
  124. top: 260px;   
  125. left: 295px;   
  126. z-index: 2;   
  127. }   
  128. .face .mustache .MutL_top {   
  129. width: 80px;   
  130. height: 2px;   
  131. background: black;   
  132. position: absolute;   
  133. top: 220px;   
  134. left: 115px;   
  135. z-index: 2;   
  136. }   
  137. .face .mustache .MutL_center {   
  138. width: 80px;   
  139. height: 2px;   
  140. background: black;   
  141. position: absolute;   
  142. top: 240px;   
  143. left: 115px;   
  144. z-index: 2;   
  145. }   
  146. .face .mustache .MutL_bottom {   
  147. width: 80px;   
  148. height: 2px;   
  149. background: black;   
  150. position: absolute;   
  151. top: 260px;   
  152. left: 115px;   
  153. z-index: 2;   
  154. }   
  155. .face .mustache .MutL_bottom,   
  156. .face .mustache .MutR_higher {   
  157. transform: rotate(160deg);   
  158. }   
  159. .face .mustache .MutL_top,   
  160. .face .mustache .MutR_lower {   
  161. transform: rotate(200deg);   
  162. }   
  163. .neck {   
  164. width: 300px;   
  165. height: 30px;   
  166. background-color: #a31f12;   
  167. border: 2px solid black;   
  168. border-radius: 15px;   
  169. position: relative;   
  170. top: 0px;   
  171. left: 250px;   
  172. z-index: 4;   
  173. }   
  174. .neck .bell {   
  175. width: 60px;   
  176. height: 60px;   
  177. overflow: hidden;   
  178. border: 2px solid black;   
  179. border-radius: 60px;   
  180. background-color: #cfcb3c;   
  181. position: absolute;   
  182. top: 5px;   
  183. left: 120px;   
  184. }   
  185. .bell .Bline {   
  186. width: 60px;   
  187. height: 2px;   
  188. background-color: #cfcb3c;   
  189. border: 2px solid black;   
  190. border-radius: 3px 3px 0 0;   
  191. position: absolute;   
  192. top: 15px;   
  193. }   
  194. .bell .Bcircle {   
  195. width: 20px;   
  196. height: 16px;   
  197. background: black;   
  198. border-radius: 8px;   
  199. position: absolute;   
  200. top: 25px;   
  201. left: 20px;   
  202. }   
  203. .bell .Bunderpart {   
  204. width: 3px;   
  205. height: 20px;   
  206. background-color: black;   
  207. position: absolute;   
  208. left: 28px;   
  209. top: 40px;   
  210. }   
  211. .body {   
  212. position: relative;   
  213. top: -300px;   
  214. z-index: 1;   
  215. }   
  216. .body .tummy {   
  217. width: 280px;   
  218. height: 240px;   
  219. background-color: #00b1e1;   
  220. border: 2px solid black;   
  221. position: absolute;   
  222. top: 267px;   
  223. left: 260px;   
  224. }   
  225. .body .bellyband {   
  226. width: 220px;   
  227. height: 220px;   
  228. background-color: white;   
  229. border: 2px solid black;   
  230. border-radius: 110px;   
  231. position: absolute;   
  232. left: 290px;   
  233. top: 267px;   
  234. }   
  235. .body .pocket {   
  236. width: 160px;   
  237. height: 160px;   
  238. border-radius: 80px;   
  239. background-color: white;   
  240. border: 2px solid black;   
  241. position: absolute;   
  242. top: 305px;   
  243. left: 320px;   
  244. }   
  245. .cover

    上一篇：html5将图片转换成base64的实例代码HTML table 直列化格式详解HTML Form表单元素全面了解浅谈HTML空链接的作用HTML标签marquee实现滚动效果的简单方法(必看)使用Html5实现异步上传文件,支持跨域,带有上传进度条浅谈html标题，段落，换行，水平线，特殊字符浅谈html有序列表、无序列表与定义列表HTML5 Web 存储详解浅谈Html网页表格结构化标记的应用

    下一篇：html5中的一些标签学习(心得)浅谈html5标签css3的常用样式HTML5新增加标签和功能概述浅谈Html5中视频 音频标签 进度条的问题HTML5进阶段内联标签汇总（小篇）关于HTML5语义标签的实践(blog页面)html5基于canvas实现的文字标签云3D旋转动画特效源码HTML5之语义标签介绍HTML5不支持标签和新增标签详解浅析HTML5中header标签的用法常用的HTML5列表标签

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网