达州做网站

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

css代码：

CSS Code复制内容到剪贴板

1. body {   

2.   margin: 0;   

3.   padding: 0;   

4. }   

5. .wrapper {   

6.   width: 300px;   

7.   margin: 100px auto;   

8. }   

9. .container {   

10.   position: relative;   

11. }   

12. .container .mybody {   

13.   position: absolute;   

14.   width: 240px;   

15.   height: 400px;   

16.   border: 5px solid #000;   

17.   border-radius: 115px;   

18.   background: #f9d946;   

19.   overflow: hidden;   

20.   z-index: 2;   

21. }   

22. .container .mybody .trousers {   

23.   position: absolute;   

24.   bottombottom: 0;   

25.   width: 100%;   

26.   height: 100px;   

27.   border-top: 6px solid #000;   

28.   background: #2074a0;   

29. }   

30. .container .mybody .trousers .trousers_top {   

31.   width: 160px;   

32.   height: 60px;   

33.   background: #2074a0;   

34.   position: absolute;   

35.   bottombottom: 100px;   

36.   left: 0;   

37.   rightright: 0;   

38.   margin: 0 auto;   

39.   border: 6px solid #000;   

40.   border-bottom: none;   

41. }   

42. .container .mybody .trousers .pocket {   

43.   width: 60px;   

44.   height: 45px;   

45.   border: 6px solid #000;   

46.   border-radius: 0 0 25px 25px;   

47.   left: 0;   

48.   rightright: 0;   

49.   margin: 0 auto;   

50.   position: absolute;   

51.   bottombottom: 65px;   

52. }   

53. .container .mybody .trousers .line-left,   

54. .container .mybody .trousers .line-rightright {   

55.   width: 30px;   

56.   height: 30px;   

57.   border-bottom-rightright-radius: 100px;   

58.   border-right: 6px solid;   

59.   border-bottom: 6px solid;   

60.   position: absolute;   

61.   top: 10px;   

62. }   

63. .container .mybody .trousers .line-rightright {   

64.   rightright: 0;   

65.   -webkit-transform: rotate(75deg);   

66.   -moz-transform: rotate(75deg);   

67.   -o-transform: rotate(75deg);   

68.   transform: rotate(75deg);   

69.   -ms-transform: rotate(75deg);   

70. }   

71. .container .mybody .trousers .line-bottombottom {   

72.   height: 40px;   

73.   border: 3px solid #000;   

74.   left: 118px;   

75.   position: absolute;   

76.   bottombottom: 0;   

77.   border-radius: 3px;   

78. }   

79. .container .mybody .trousers .condoleBelt {   

80.   position: absolute;   

81. }   

82. .container .mybody .trousers .condoleBelt .left,   

83. .container .mybody .trousers .condoleBelt .rightright {   

84.   width: 100px;   

85.   height: 16px;   

86.   border: 5px solid #000;   

87.   background: #2074a0;   

88.   top: -90px;   

89.   position: absolute;   

90. }   

91. .container .mybody .trousers .condoleBelt .left:after,   

92. .container .mybody .trousers .condoleBelt .rightright:after {   

93.   content: '';   

94.   background: #000;   

95.   width: 8px;   

96.   height: 8px;   

97.   border-radius: 50%;   

98.   position: absolute;   

99.   top: 3px;   

100. }   

101. .container .mybody .trousers .condoleBelt .left {   

102.   left: -35px;   

103.   transform: rotate(45deg);   

104. }   

105. .container .mybody .trousers .condoleBelt .left:after {   

106.   rightright: 3px;   

107. }   

108. .container .mybody .trousers .condoleBelt .rightright {   

109.   transform: rotate(-45deg);   

110.   left: 165px;   

111. }   

112. .container .mybody .trousers .condoleBelt .rightright:after {   

113.   left: 3px;   

114. }   

115. .container .hairs {   

116.   position: relative;   

117. }   

118. .container .hairs .hairs_one {   

119.   width: 130px;   

120.   height: 100px;   

121.   border-top: 8px solid #000;   

122.   position: absolute;   

123.   transform: rotate(35deg);   

124.   left: 24px;   

125.   top: -17px;   

126.   border-radius: 50%;   

127.   animation: hairs 2s ease-in-out infinite;   

128. }   

129. .container .hairs .hairs_two {   

130.   width: 80px;   

131.   height: 80px;   

132.   border-top: 6px solid #000;   

133.   position: absolute;   

134.   transform: rotate(15deg);   

135.   left: 50px;   

136.   top: -10px;   

137.   border-radius: 50%;   

138. }   

139. .container .eyes {   

140.   position: relative;   

141.   z-index: 3;   

142. }   

143. .container .eyes .eye_left,   

144. .container .eyes .eye_right {   

145.   width: 85px;   

146.   height: 85px;   

147.   border: 6px solid #000;   

148.   border-radius: 50%;   

149.   background: #fff;   

150.   position: absolute;   

151.   top: 60px;   

152. }   

153. .container .eyes .eye_left:after,   

154. .container .eyes .eye_right:after {   

155.   content: '';   

156.   width: 28px;   

157.   height: 18px;   

158.   background: #000;   

159.   position: absolute;   

160.   top: 40%;   

161. }   

162. .container .eyes .eye_left {   

163.   left: 27px;   

164. }   

165. .container .eyes .eye_left:after {   

166.   left: -30px;   

167.   transform: rotate(7deg) skewX(20deg);   

168. }   

169. .container .eyes .eye_right {   

170.   left: 124px;   

171. }   

172. .container .eyes .eye_right:after {   

173.   rightright: -32px;   

174.   transform: rotate(-7deg) skewX(-20deg);   

175. }   

176. .container .eyes .black {   

177.   width: 40px;   

178.   height: 40px;   

179.   background: #000;   

180.   border-radius: 50%;   

181.   position: absolute;   

182.   top: 24px;   

183.   left: 22px;   

184.   animation: eys_black 5s ease-in-out infinite;   

185. }   

186. .container .eyes .white {   

187.   width: 20px;   

188.   height: 20px;   

189.   background: #fff;   

190.   border-radius: 50%;   

191.   position: absolute;   

192.   top: 10px;   

193.   left: 10px;   

194.   animation: eys_white 5s ease-in-out infinite;   

195. }   

196. .container .mouth {   

197.   position: relative;   

198.   z-index: 3;   

199. }   

200. .container .mouth .mouth_box {   

201.   position: absolute;   

202.   width: 55px;   

203.   height: 35px;   

204.   border: 5px solid #000;   

205.   background: #fff;   

206.   top: 170px;   

207.   left: 90px;   

208.   border-bottom-left-radius: 30px;   

209.   transform: rotate(-35deg);   

210.   animation: mouth_box 5s ease-in-out infinite;   

211. }   

212. .container .mouth .mouth_box:after {   

213.   background: #f9d946;   

214.   width: 70px;   

215.   height: 32px;   

216.   content: '';   

217.   position: absolute;   

218.   border-bottom: 5px solid #000;   

219.   transform: rotate(35deg);   

220.   top: -14px;   

221.   left: 6px;   

222.   animation: mouth_after 5s ease-in-out infinite;   

223. }   

224. .container .hands {   

225.   position: relative;   

226.   z-index: 1;   

227. }   

228. .container .hands .left_hand,   

229. .container .hands .right_hand {   

230.   width: 80px;   

231.   height: 80px;   

232.   border: 6px solid #000;   

233.   transform: rotate(40deg);   

234.   position: absolute;   

235.   background: #f9d946;   

236.   border-radius: 30px;   

237.   top: 220px;   

238.   animation: left_hand 1s ease-in-out infinite;   

239. }   

240. .container .hands .left_hand {   

241.   left: -24px;   

242. }   

243. .container .hands .left_hand:after {   

244.   width: 6px;   

245.   border: 3px solid #000;   

246.   position: absolute;   

247.   content: '';   

248.   transform: rotate(90deg);   

249.   bottombottom: 26px;   

250.   left: 12px;   

251. }   

252. .container .hands .right_hand {   

253.   rightright: 26px;   

254. }   

255. .container .hands .right_hand:after {   

256.   width: 6px;   

257.   border: 3px solid #000;   

258.   position: absolute;   

259.   content: '';   

260.   top: 20px;   

261.   rightright: 18px;   

262. }   

263. .container .foot {   

264.   position: relative;   

265. }   

266. .container .foot .left_foot,   

267. .container .foot .right_foot {   

268.   width: 36px;   

269.   height: 50px;   

270.   background: #000;   

271.   position: absolute;   

272.   top: 400px;   

273. }   

274. .container .foot .left_foot:after,   

275. .container .foot .right_foot:after {   

276.   width: 60px;   

277.   height: 35px;   

278.   position: absolute;   

279.   bottombottom: 0;   

280.   content: '';   

281.   background: #000;   

282. }   

283. .container .foot .left_foot {   

284.   left: 86px;   

285.   animation: left_foot 1s ease-in-out infinite;   

286. }   

287. .container .foot .left_foot:after {   

288.   rightright: 0;   

289.   top: 20px;   

290.   border-radius: 30px 0 10px 20px;   

291. }   

292. .container .foot .right_foot {   

293.   left: 128px;   

294.   animation: right_foot 1s ease-in-out infinite;   

295. }   

296. .container .foot .right_foot:after {   

297.   left: 0;   

298.   top: 20px;   

299.   border-radius: 0 30px 20px 10px;   

300. }   

301. .container .foot_shadow {   

302.   position: absolute;   

303.   top: 456px;   

304.   width: 240px;   

305.   height: 2px;   

306.   background: rgba(0, 0, 0, 0.3);   

307.   box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);   

308.   border-radius: 50%;   

309. }   

310. @keyframes hairs {   

311.   30% {   

312.     transform: rotate(32deg) translate3d(-4px, -2px, 0);   

313.   }   

314. }   

315. @keyframes eys_black {   

316.   0% {   

317.     transform: translateX(0px);   

318.   }   

319.   20%,   

320.   40% {   

321.     transform: translateX(15px);   

322.   }   

323.   60%,   

324.   100% {   

325.     transform: translateX(0px);   

326.   }   

327.   80%,   

328.   90% {   

329.     transform: translateX(-15px);   

330.   }   

331. }   

332. @keyframes eys_white {   

333.   0% {   

334.     transform: translateX(0px);   

335.   }   

336.   20%,   

337.   40% {   

338.     transform: translate3d(3px, 4px, 0px);   

339.   }   

340.   60% {   

341.     transform: translate(5px, 5px);   

342.   }   

343.   80% {   

344.     transform: translateX(0px);   

345.   }   

346.   100% {   

347.     transform: translateX(0px);   

348.   }   

349. }   

350. @keyframes mouth_box {   

351.   40%,   

352.   43% {   

353.     width: 45px;   

354.     height: 25px;   

355.     top: 175px;   

356.   }   

357.   0%,   

358.   35%,   

359.   48%,   

360.   100% {   

361.     width: 55px;   

362.     height: 35px;   

363.     top: 170px;   

364.     transform: rotate(-35deg);   

365.   }   

366. }   

367. @keyframes mouth_after {   

368.   40%,   

369.   43% {   

370.     width: 60.5px;   

371.     top: -19.3px;   

372.     left: 1.5px;   

373.   }   

374.   0%,   

375.   35%,   

376.   48%,   

377.   100% {   

378.     width: 70px;   

379.     top: -16px;   

380.     left: 3px;   

381.     transform: rotate(33deg);   

382.   }   

383. }   

384. @keyframes left_hand {   

385.   0%,   

386.   50%,   

387.   100% {   

388.     transform: rotate(40deg);   

389.   }   

390.   30% {   

391.     transform: rotate(37deg) translateX(1px);   

392.   }   

393. }   

394. @keyframes right_foot {   

395.   0%,   

396.   50%,   

397.   100% {   

398.     transform: rotate(0deg);   

399.   }   

400.   30% {   

401.     transform: rotate(-8deg);   

402.   }   

403. }   

404. @keyframes left_foot {   

405.   0%,   

406.   50%,   

407.   100% {   

408.     transform: rotate(0deg);   

409.   }   

410.   80% {   

411.     transform: rotate(8deg);   

412.   }   

413. }  

“怎么用纯CSS3画出小黄人图案”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 达州



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：达州市南岸区弹子石腾龙大道58号2栋21-6

友情链接： 网站建设改版   php空间   宣传册设计   重庆手机网站建设   鸿程源茂   成都做网站   IOS开发   犀浦雨棚定制   眉山电信机房托管   成都模版网站建设   

版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14