[css]我要用css画幅画(九) - Apple Logo

前端开发作者： 2024-08-21 10:35:02

接着之前的[css]我要用css画幅画(八) - Hello Kitty，这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说。其实之前的也打算详细讲分析和设计过程，不过之前的图比

1 <div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>

html

1 .apple-leaf {
2     border-top-left-radius: 100%;
3     border-bottom-right-radius:4     height: 55px;
5     left: 49%;
6     top: -43px;
7     width: 45px;
8     z-index: 6;
9 }

css

="apple-body border-red-2">
2         ="apple-body-inside border-black-2"3     </>

html

 1 .border-black-2 {
 2     border: 2px solid black;
 3 }
 4 
 5 
 6 .border-red-2 {
 7  2px solid red;
 8 }
 9 
10 .apple-body {
11  150px;
12  200px;
13  3;
14 }
15 
16 .apple-body-inside {
17  60px 70px;
18     border-top-right-radius:19     border-bottom-left-radius: 100px 115px;
20 21  175px;
22     margin-top: -5px;
23 24 25 }

css

="apple-body bacc-black oh border-black-2"="apple-body-inside bacc-white">

html

.oh {
    overflow: hidden;
 4 .bacc-white {
 5     background-color: white;
 6 }
 7 
 8 .bacc-black {
 9  black;
10 }
11 14 15 }
16 
17 25 26 }

css

="apple-ate pos-a pull-left bacc-black">

html

.apple-ate {
    border-radius: 50%;
 95px;
    margin-left: 160px;
 8px;
7 }

css

="apple-body-top-left oh pos-r pull-left bacc-black"="apple-body-top-left-inside bacc-white">

html

.apple-body-top-left {
 15px;
 3  65px;
 4  4;
 5 }
 6 
 7 .apple-body-top-left-inside {
 8  75px;
10  -17px;
 82px;
13 }

css

="apple-body-top-center pos-a pull-left oh bacc-white"2                 ="apple-body-top-center-inside bacc-black"3             >

html

.apple-body-top-center {
 20px;
 4px;
 85px;
 6  5;
 7 }
 8 
 9 .apple-body-top-center-inside {
 1px;
 -80px;
 87px;
15 16 }

css

 1 ="apple-container pos-r m-hoz-auto" 2          3         ="apple-body-top pos-r m-hoz-auto" 4             ="apple-body-top-left oh pos-r pull-left" 5                  6              7             ="apple-body-top-right oh pos-r pull-left" 8                 ="apple-body-top-right-inside bacc-white" 9             10             ="apple-body-top-center oh pos-a pull-left"11                 12             13         14         ="apple-body pos-r oh m-hoz-auto"15             ="apple-body-inside pull-left  bacc-white"16             17         18         ="apple-body-bottom pos-r m-hoz-auto"19             ="apple-body-bottom-left oh pos-r pull-left"20                 ="apple-body-bottom-left-inside bacc-white"21             22             ="apple-body-bottom-right oh pos-r pull-left"23                 ="apple-body-bottom-right-inside bacc-white"24             >            
25             ="apple-body-bottom-center oh pos-a pull-left"26                 ="apple-body-bottom-center-inside bacc-black"27             28         >        
29     >

html

  1 .apple-container {
  2  600px;
  3  100px;
  4     margin-bottom:  5   6 }
  7 
  8   9  10  11  12  13  14  15  16 }
 17 
 18 .apple-body-top {
 19  20  130px;
 21 }
 22 
 23  24  25  26  27 }
 28 
 29  30  31  32  33  34  35 }
 36 
 37 .apple-body-top-right {
 38  39  40  41 }
 42 
 43 .apple-body-top-right-inside {
 44  45  46  47  48  49 }
 50 
 51  52  53  54  55  56  57 }
 58 
 59  60  61  62  63  64  65  66 }
 67 
 68  69  70  71  72 }
 73 
 74  75  76  77  78  79  80  81  82  83 }
 84 
 85  86  87  88  89  90  91 }
 92 
 93 .apple-body-bottom {
 94  95  96 }
 97 
 98 .apple-body-bottom-left {
 99 100 101 102 }
103 
104 .apple-body-bottom-left-inside {
105 106 107  -66px;
108  -7px;
109  70px;
110 }
111 
112 .apple-body-bottom-right {
113 114 115 116 }
117 
118 .apple-body-bottom-right-inside {
119 120 121 122  2px;
123 124 }
125 
126 .apple-body-bottom-center {
127 128  28px;
129  -3px;
130 131 132 }
133 
134 .apple-body-bottom-center-inside {
135 136 137  -6px;
138 139 }