zoukankan      html  css  js  c++  java

  • 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             /* 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         }

     　　效果图：

    　　

    　　
  • 相关阅读:
    java学习笔记（四）
    Sigmoid 函数
    Neural Architectures for Named Entity Recognition 学习笔记
    java学习笔记（三）
    java学习笔记（二）
    Java学习笔记（一）
    shell 小技巧
    Network Embedding 相关论文
    C++学习笔记（二）
    js判断某字符出现的个数
  • 原文地址：https://www.cnblogs.com/niujifei/p/11269115.html
Copyright © 2011-2022 走看看