[css]我要用css画幅画(四)

前端开发作者： 2024-08-21 10:40:01

接着之前的[css]我要用css画幅画(三)，今天，我画了两朵云，并给小明介绍了个朋友：静静。 github：https://github.com/bee0060/Css-Paint ，

 1 <!DOCTYPE html>
 2 <html lang="en" 3 head 4     meta charset="UTF-8" 5     title>Css Paint</ 6     link rel="stylesheet" type="text/css" href="../css/sun.css" />
 7     ="../css/house.css"  8     ="../css/human.css"  9     ="../css/cloud.css" 10 11 body12     div class="sun"13         ="sun-body"></div14         ="sun-shine-light sun-shine-light1"15         ="sun-shine-light sun-shine-light2"16         ="sun-shine-light sun-shine-light3"17         ="sun-shine-light sun-shine-light4"18         ="sun-shine-light sun-shine-light5"19     20 
21     ="house-width house"22         ="house-width house-roof house-roof-left"23         ="house-width house-roof house-roof-right"24         ="house-width house-wall"25             
26             ="house-wall-door"27                 
28                 ="house-wall-door-handle"29             30         31     32 
33     ="human human-pos-1"34         p ="lines">大家好，我叫小明p35         ="human-head-normal"36         ="human-body-normal"37         ="human-arms-normal"38         ="human-legs-normal"39     40 
41     ="human human-pos-2"42         >大家好，我叫静静43         44         45         46         ="human-legs-1"47     48 
49     ="cloud cloud-pos cloud-pos-1"50         ="cloud-pos cloud-border cloud-bg cloud-top"51         ="cloud-pos cloud-border cloud-bg cloud-left"52         ="cloud-pos cloud-border cloud-bg cloud-right"53         ="cloud-pos cloud-border cloud-bg cloud-bottom"54     55     ="cloud cloud-pos cloud-pos-2"56         57         58         59         60     61 
62 
63 64 html>

Html

 1 .human-pos-1 {
 2     left: 250px;
 3     bottom: 25px;
 4 }
 5 
 6 .human-pos-2 {
 7  40px;
 8  60px;
 9 }
10 
11 .human-legs-1 {
12     border: 3px solid #000;
13     border-bottom: none;
14     border-right:15     height:50px;
16  55px;
17     position: absolute;
18     top: 120px;
19     width: 50px;
20     
21     -webkit-transform: rotate(-2deg);
22     -webkit-transform-origin: 1px 1px;
23 }

human.css改动

.cloud{
 150px;
.cloud-pos {
 8 }
 9 
10 .cloud-pos-1 {
11  35%;
13 }
14 
15 .cloud-pos-2 {
 60%;
18 }
19 
20 .cloud-bg {
    background-color: skyBlue;
22 }
23 
24 .cloud-border {
25  2px solid #000;
26 }
27 
28 .cloud-top {
29     border-radius: 100%;
30     border-width: 0px;
31  100px;
32  50%;
33     margin-left:-75px;
34 35 }
36 
37 .cloud-left {
38 39  0px; 
40 41     margin-top: -50px;
42 43 44 }
45 
46 .cloud-right {    
47 48 49 50 51     right:0;
52 53 54 }
55 .cloud-bottom {    
56 57 58 59 53%;
60  -75px;
61 62  65%;
63 64 }