怎么用HTML5+CSS3实现机器猫

本篇内容介绍了“怎么用HTML5+CSS3实现机器猫”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

为上高等地区用户提供了全套网页设计制作服务，及上高网站建设行业解决方案。主营业务为成都做网站、网站制作、上高网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.   

4.   

5.   

6.   

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.   

340.   

341.   

342.   

343.   

344.   

345.   

346.   

347.   

348.   

349.   

350.