CSS3 小黄人案例

使用 CSS3 和 HTML5 制作一个小黄人。

结构代码：

 1 　　<div class="wrap">
 2         <!-- 头发 -->
 3         <div class="hair">
 4             <div class="hair_1"></div>
 5             <div class="hair_2"></div>
 6         </div>
 7         <!-- 身体 -->
 8         <div class="body">
 9             <!-- 眼睛 -->
10             <div class="eyes">
11                 <!-- 左眼 -->
12                 <div class="eyes_l">
13                     <div class="l_black"></div>
14                     <div class="l_white"></div>
15                 </div>
16                 <!-- 右眼 -->
17                 <div class="eyes_r">
18                     <div class="r_black"></div>
19                     <div class="r_white"></div>
20                 </div>
21             </div>
22             <!-- 嘴巴 -->
23             <div class="mouth"></div>
24             <!-- 裤子 -->
25             <div class="trousers">
26                 <!-- 裤子上 -->
27                 <div class="trousers_t">
28                     <div class="t_l_belt"></div>
29                     <div class="t_r_belt"></div>
30                 </div>
31                 <!-- 裤子下 -->
32                 <div class="trousers_b"></div>
33             </div>
34         </div>
35
36         <!-- 手臂 -->
37         <div class="hand">
38             <div class="hand_l"></div>
39             <div class="hand_r"></div>
40         </div>
41
42         <!-- 腿脚 -->
43         <div class="foot">
44             <div class="foot_l"></div>
45             <div class="foot_r"></div>
46         </div>
47
48     </div>

　　CSS 样式：

  1 　　　　.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: -1
 53         }
 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         }

　　效果图：

原文地址：https://www.cnblogs.com/niujifei/p/11269115.html

时间： 2024-11-07 02:11:14

CSS3 小黄人案例的相关文章

【推荐】纯CSS3画出小黄人并实现动画效果

前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

CSS3实现小黄人动画

转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞一个DIY的动画出来,可是,会PS不一定会设计啊,我搞不出一套动画设计稿出来啊[抓狂]….于是乎,去了站酷网找找素材,我果然还是太天真了,最后从心只找到了一张图: 联想到我要做CSS3动画,呵呵……怎么办 ? ——没办法,抠呗!(此处勿喷,着实无素材) ……最后效果变成这样子(gif图有卡顿现象,请

css3实现小黄人

效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <title>纯CSS3画出小黄人并实现动画效果</title> <Link href="index.css" type="text/css" rel="styl

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类.不同身材的小黄人. GitHub传送门:https://github.com/lancer07/css3Minons 效果是这个样子的首先先做个标准版的(ps:也就是图中的第一个小黄人

微信小程序相关三、css写小黄人

小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基本上都是用border,transform:rotate(),animation,和一些细节做的,左边的对话框那里的小尖头也是一个重点细节下面附上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&quo

Quartz2D练习 -- 小黄人

Main.storyboard <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="5053" systemVers

iOS开发 - Quartz2D绘制小黄人

Quartz2D绘制小黄人 - (void)drawRect:(CGRect)rect { // 1.上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.身体 drawBody(ctx, rect); // 3.嘴(微笑) drawMouth(ctx, rect); // 4.画眼睛 drawEyes(ctx, rect); } /** * 眼睛 */ void drawEyes(CGContextRef ctx, CGRect

小绿人小红人和小黄人

(2016/4/14 看了昨天的锵锵三人行继续谈王小波,子东提到一个有趣的观点.路遥和王小波的对照.一个返乡农村青年为成为城市人的奋斗,一个下放青年以普通人的姿态谈自由. 两位都是我喜欢的作家.王小波更是我最喜欢的作家.子东的对照让我想起平等和自由,路遥的苦苦追求能够理解为底层人向往的平等,王小波戏谑地展示的则是一个精神贵族觉得的最可贵的东西,自由.由两者的关系又引发了以下的想象.当然,路遥追求的平等绝不是以下小红人理解的那种. ) 从前有个国家,那里的人分为两种:一种是小绿人,一种是小红人.