用html和css制作小黄人,CSS3 小黄人案例
.wrap{
2 width:400px;
3 height:600px;
4 margin:0 auto;
5 border:1px solid red;
6 position:relative;
7 }
8
9 /*身体*/
10 .body{
11 width:250px;
12 height:400px;
13 border:5px solid #000;
14 border-radius:125px;
15 position:absolute;
16 top:50%;
17 left:50%;
18 transform:translate(-50%,-50%);
19 background-color:yellow;
20 overflow:hidden;
21
22 }
23 /*头发*/
24 .hair_1,25 .hair_2{
26 width:130px;
27 height:100px;
28 border-top:10px solid #000;
29 border-radius:50%;
30 position:absolute;
31 }
32 .hair_1{
33 left:100px;
34 top:80px;
35 transform:rotate(45deg);
36 }
37 .hair_2{
38 left:102px;
39 top:70px;
40 transform:rotate(50deg);
41 }
42
43 /*手臂*/
44 .hand_l,45 .hand_r{
46 width:100px;
47 height:100px;
48 border:5px solid #000;
49 position:absolute;
50 border-radius:30px;
51 background-color:yellow;
52 z-index:-153 }
54 .hand_l{
55 left:50px;
56 top:300px;
57 transform:rotate(30deg);
58 }
59 .hand_r{
60 right:50px;
61 top:300px;
62 transform:rotate(-30deg);
63 }
64 .hand_l::after,65 .hand_r::after{
66 content:"";
67 width:30px;
68 height:10px;
69 position:absolute;
70 background:#000;
71 border-radius:5px;
72
73 }
74 .hand_l::after{
75 left:6px;
76 top:60px;
77 transform:rotate(-90deg);
78 }
79 .hand_r::after{
80 right:6px;
81 top:60px;
82 transform:rotate(-90deg);
83 }
84
85 /*腿*/
86
87 .foot_l,88 .foot_r{
89 width:40px;
90 height:70px;
91 background-color:#000;
92 position:absolute;
93 top:490px;
94 z-index:-1;
95 }
96
97 .foot_l{
98 left:155px;
99
100 }
101
102 .foot_r{
103 right:155px;
104
105 }
106
107 /*脚*/
108 .foot_l::after,109 .foot_r::after{
110 content:"";
111 width:60px;
112 height:40px;
113 background-color:#000;
114 border-radius:20px;
115 position:absolute;
116 top:30px;
117 }
118
119 .foot_l::after{
120 left:-40px;
121 }
122 .foot_r::after{
123 right:-40px;
124 }
125
126 /*眼睛*/
127 .eyes{
128 /*width: 100%;129 height: 100px;*/
130 /*border: 1px solid red;*/
131 position:absolute;
132 top:60px;
133 left:25px;
134 }
135 .eyes_l,136 .eyes_r{
137 width:90px;
138 height:90px;
139 border:5px solid #000;
140 border-radius:50%;
141 background-color:#fff;
142 float:left;
143
144 }
145 .eyes_l::after,146 .eyes_r::after{
147 content:"";
148 width:31px;
149 height:20px;
150 position:absolute;
151 background-color:#000;
152 top:35px;
153
154 }
155
156 .eyes_l::after{
157 left:-26px;
158 transform:rotate(20deg);
159 border-radius:2px 7px 0px 2px;
160 }
161 .eyes_r::after{
162 right:-26px;
163 transform:rotate(-20deg);
164 border-radius:8px 2px 0px 2px;
165 }
166
167 /*黑色眼珠*/
168 .l_black,169 .r_black{
170 width:50px;
171 height:50px;
172 background-color:#000;
173 border-radius:50%;
174 position:absolute;
175 top:23px;
176
177 }
178 .l_black{
179 left:25px;
180 }
181 .r_black{
182 left:125px;
183 }
184 /*白眼珠*/
185
186 .l_white,187 .r_white{
188 width:20px;
189 height:20px;
190 background-color:#fff;
191 border-radius:50%;
192 position:absolute;
193 top:40px;
194 }
195 .l_white{
196 left:50px;
197 }
198 .r_white{
199 left:130px;
200 }
201
202 /*嘴巴*/
203 .mouth{
204 width:60px;
205 height:35px;
206 border:5px solid #000;
207 border-radius:0 0 0 30px;
208 position:absolute;
209 background-color:#fff;
210 left:90px;
211 top:180px;
212 transform:rotate(-30deg);
213 }
214 .mouth::after{
215 content:"";
216 width:80px;
217 height:40px;
218 background-color:yellow;
219 position:absolute;
220 border-bottom:5px solid #000;
221 left:1px;
222 top:-22px;
223 transform:rotate(30deg);
224 }
225
226 /*裤子上*/
227 .trousers{
228 width:100%;
229 height:150px;
230
231 position:absolute;
232 top:260px;
233
234 }
235 .trousers_t{
236 width:150px;
237 height:51px;
238 background-color:blue;
239 border:5px solid #000;
240 border-bottom:none;
241 position:absolute;
242 left:45px;
243 z-index:10;
244
245 }
246 .trousers_b{
247 width:250px;
248 height:86px;
249 background-color:blue;
250 position:absolute;
251 top:50px;
252 border-top:5px solid #000;
253 /*border-radius: 0 0 125px 125px;*/
254 }
255
256 /*肩带*/
257 .t_l_belt,258 .t_r_belt{
259 width:100px;
260 height:20px;
261 background-color:blue;
262 border:5px solid #000;
263 position:absolute;
264 top:-24px;
265
266 }
267 .t_l_belt{
268 left:-74px;
269 transform:rotate(35deg);
270 }
271 .t_r_belt{
272 right:-74px;
273 transform:rotate(-35deg);
274 }
275
276 .t_l_belt::after,277 .t_r_belt::after{
278 content:"";
279 position:absolute;
280 width:10px;
281 height:10px;
282 background-color:#000;
283 border-radius:50%;
284 top:5px;
285 }
286 .t_l_belt::after{
287 left:87px;
288 }
289 .t_r_belt::after{
290 left:3px;
291 }
292
293 /*动画*/
294 .hair_1,295 .hair_2{
296 animation:hair 5s ease-in infinite;
297 }
298
299 @keyframes hair{
300 10% {301 transform:rotate(45deg);
302 }
303 20%{
304 transform:rotate(56deg);
305 }
306 50%{
307 transform:rotate(45deg);
308 }
309 80%{
310 transform:rotate(56deg);
311 }
312 100%{
313 transform:rotate(45deg);
314 }
315 }316
317 .l_black,318 .r_black{
319 animation:eye 5s linear infinite;
320 }
321
322 @keyframes eye{
323 10% {324 transform:translate(0);
325 }
326 20%{
327 transform:translate(20px);
328 }
329 50%{
330 transform:translate(0);
331 }
332 80%{
333 transform:translate(-20px);
334 }
335 100%{
336 transform:translate(0);
337 }
338 }339
340 .l_white,341 .r_white{
342 animation:eyewhite 5s linear infinite;
343 }
344
345 @keyframes eyewhite{
346 10% {347 transform:translate(0,0);
348 }
349 20%{
350 transform:translate(20px,5px);
351 }
352 50%{
353 transform:translate(0,0);
354 }
355 80%{
356 transform:translate(-20px,5px);
357 }
358 100%{
359 transform:translate(0,0);
360 }
361 }
用html和css制作小黄人,CSS3 小黄人案例相关推荐
- css制作聊天气泡android,CSS3巧妙实现聊天气泡
传统的聊天气泡 什么又是传统的聊天气泡,直接上图 代码如下 实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属 ...
- html+fadein动画,使用Animate.css制作超炫的CSS3动画
如何使用 首先引入animate css文件. 然后给指定的元素加上指定的动画class样式名. 这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式.第二 ...
- 做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
- html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
- HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- html css制作404页面,CSS3绘制404页面
标题有点噱了... 最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个. 只用的CSS3中的旋转, 效果如下 上代码: Error .circle { width: 200px ...
- css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- 「磨人的小妖精」JavaWeb如何学习?先肝了这套教程
都说一入Java深似海,从此代码是爱人,但是学习的过程却从来都不轻松. 当下,越来越多的互联网企业,招聘Java工程师时,明确要求需熟练掌握JavaWeb技术.作为衔接前后端的重要一环,JavaWeb ...
最新文章
- Android 基于 Speex 的高度封装语音库,0 耦合,没三方jar包
- xcode 中的iOS模拟器,home键快捷键
- 嵌入式项目数据解决方案之sqlite
- python爬取地理数据_python爬取所有人位置信息——腾讯位置大数据
- BugkuCTF-MISC题低位的色彩
- python导入不了包_python – 导入不存在的包
- bzoj2438 luogu4819 [中山市选]杀人游戏
- python计算空类型_python的变量 类型和存储
- window.open的小问题
- Oracle 11g for Linux安装前准备工作
- vs 2017插件visual assist 10.9.2238破解版安装指南及百度云链接
- 日文全角半角字符判断
- Drupal7 数据库查询
- C语言用梯形法求定积分
- CuraEngine和Cura配置(Ubuntu18.04环境)
- 规划云:GIS相关模块
- MySQL设置自增初始值和步长
- 程序员应了解:知识技能金字塔
- 牛客练习赛51 C:勾股定理(勾股数)
- 系统重装后no bootable device