首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5+CSS3实现机器猫

Posted in HTML / CSS onOctober 17, 2016

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  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 {   
  246. width: 164px;   
  247. height: 80px;   
  248. background-color: white;   
  249. border-bottom: 2px solid black;   
  250. /*border: 5px solid orange;*/   
  251. position: absolute;   
  252. top: 300px;   
  253. left: 320px;   
  254. }   
  255. .left_hand,   
  256. .right_hand {   
  257. height: 100px;   
  258. width: 100px;   
  259. position: absolute;   
  260. top: 272px;   
  261. left: 248px;   
  262. }   
  263. .left_hand {   
  264. left: -10px;   
  265. }   
  266. .left_hand .Larm {   
  267. width: 70px;   
  268. height: 100px;   
  269. background-color: #00bee8;   
  270. border: 1px solid black;   
  271. position: relative;   
  272. top: 200px;   
  273. left: 535px;   
  274. transform: rotateZ(135deg);   
  275. /*z-index: -1;*/   
  276. }   
  277. .right_hand {   
  278. left: -10px;   
  279. }   
  280. .right_hand .Rarm {   
  281. width: 70px;   
  282. height: 100px;   
  283. background-color: #00bee8;   
  284. border: 1px solid black;   
  285. /*z-index: -1;*/   
  286. position: relative;   
  287. top: 200px;   
  288. left: 215px;   
  289. transform: rotateZ(45deg);   
  290. }   
  291. .left_hand .Lpalm,   
  292. .right_hand .Rpalm {   
  293. width: 80px;   
  294. height: 80px;   
  295. border-radius: 40px;   
  296. border: 2px solid black;   
  297. background-color: white;   
  298. position: absolute;   
  299. }   
  300. .right_hand .Rpalm {   
  301. left: 580px;   
  302. top: 260px;   
  303. z-index: 1;   
  304. }   
  305. .left_hand .Lpalm {   
  306. left: 160px;   
  307. top: 260px;   
  308. z-index: 1;   
  309. }   
  310. .foot .left_foot,   
  311. .foot .right_foot {   
  312. width: 150px;   
  313. height: 40px;   
  314. background-color: white;   
  315. border: 2px solid black;   
  316. border-radius: 80px 60px 60px 40px;   
  317. position: relative;   
  318. }   
  319. .foot .left_foot {   
  320. left: 240px;   
  321. top: 210px;   
  322. }   
  323. .foot .right_foot {   
  324. top: 165px;   
  325. left: 410px;   
  326. }   
  327. .foot .crotch {   
  328. width: 40px;   
  329. height: 20px;   
  330. background-color: white;   
  331. border: 2px solid black;   
  332. border-bottom: none;   
  333. border-radius: 40px 40px 0 0;   
  334. position: relative;   
  335. top: 103px;   
  336. left: 382px;   
  337. z-index: 2   
  338. }   
  339. </style>  
  340. </head>  
  341. <body>  
  342. <div class="wrap">  
  343. <div class="whole">  
  344. <!-- 头 -->  
  345. <div class="head">  
  346. <!-- 眼 -->  
  347. <div class="eye">  
  348. <!-- 左眼 -->  
  349. <div class="left_eye">  
  350. <!-- 左眼球 -->  
  351. <div class="LeyeBall"></div>  
  352. </div>  
  353. <!-- 右眼 -->  
  354. <div class="right_eye">  
  355. <!-- 右眼球 -->  
  356. <div class="ReyeBall"></div>  
  357. </div>  
  358. </div>  
  359. <!-- 脸 -->  
  360. <div class="face">  
  361. <!-- 脸型 -->  
  362. <div class="feature"></div>  
  363. <!-- 鼻 -->  
  364. <div class="nose"></div>  
  365. <!-- 鼻子线 -->  
  366. <div class="Nline"></div>  
  367. <!-- 嘴 -->  
  368. <div class="mouth"></div>  
  369. <!-- 胡子 -->  
  370. <div class="mustache">  
  371. <div class="MutL_top"></div>  
  372. <div class="MutL_center"></div>  
  373. <div class="MutL_bottom"></div>  
  374. <div class="MutR_higher"></div>  
  375. <div class="MutR_middle"></div>  
  376. <div class="MutR_lower"></div>  
  377. </div>  
  378. </div>  
  379. </div>  
  380. <!-- 脖子 -->  
  381. <div class="neck">  
  382. <!-- 铃铛 -->  
  383. <div class="bell">  
  384. <div class="Bline"></div>  
  385. <div class="Bcircle"></div>  
  386. <div class="Bunderpart"></div>  
  387. </div>  
  388. </div>  
  389. <!-- 身体 -->  
  390. <div class="body">  
  391. <!-- 肚子 -->  
  392. <div class="tummy"></div>  
  393. <!-- 肚兜 -->  
  394. <div class="bellyband"></div>  
  395. <!-- 口袋 -->  
  396. <div class="pocket"></div>  
  397. <div class="cover"></div>  
  398. </div>  
  399. <!-- 左手 -->  
  400. <div class="left_hand">  
  401. <!-- 手臂 -->  
  402. <div class="Larm"></div>  
  403. <!-- 手掌 -->  
  404. <div class="Lpalm"></div>  
  405. </div>  
  406. <!-- 右手 -->  
  407. <div class="right_hand">  
  408. <!-- 手臂 -->  
  409. <div class="Rarm"></div>  
  410. <!-- 手掌 -->  
  411. <div class="Rpalm"></div>  
  412. </div>  
  413. <!-- 脚 -->  
  414. <div class="foot">  
  415. <!-- 左脚 -->  
  416. <div class="left_foot"></div>  
  417. <!-- 右脚 -->  
  418. <div class="right_foot"></div>  
  419. <div class="crotch"></div>  
  420. </div>  
  421. </div>  
  422. </div>  
  423. </body>  
  424. </html>  

以上所述是小编给大家介绍的HTML5+CSS3实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

HTML5+CSS3实现机器猫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3动画：5种预载动画效果实例
Apr 05 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
浅谈HTML5 服务器推送事件（Server-sent Events）
Aug 01 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 #HTML / CSS
CSS3 画基本图形，圆形、椭圆形、三角形等
Sep 20 #HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 #HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 #HTML / CSS
a标签下载链接的简单实现
Sep 13 #HTML / CSS
HTML5新增加的功能详解
Sep 05 #HTML / CSS
HTML5新增加标签和功能概述
Sep 05 #HTML / CSS
马来西亚购物网站(41) 法国购物网站(144) 印尼购物网站(37) 俄罗斯购物网站(137) 印度购物网站(45) 澳大利亚购物网站(309) 台湾购物网站(77) 墨西哥购物网站(16) 丹麦购物网站(22) 埃及购物网站(2)
You might like
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
浅谈AngularJS中使用$resource（已更新）
2017/09/14 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python list转dict示例分享
2014/01/28 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python ubplot使用方法解析
2020/01/10 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
中学生打架检讨书
2014/02/10 职场文书
网络营销策划方案
2014/06/04 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
公司行政管理制度范本
2015/08/05 职场文书
安全生产培训心得体会
2016/01/18 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书