Add chick wing

cindyliu923 · cindyliu923 · commit 7da5ecb5eb4f · 2020-03-30T23:20:27.000+08:00
diff --git a/cindy/Day2-clock/index.html b/cindy/Day2-clock/index.html
@@ -8,15 +8,18 @@
 </head>
 <body>
   <div class="chick">
-    <audio class="time-audio" controls="controls">
-      <source src="" type="audio/mpeg">
-    </audio>
     <div class="chick-head">
       <div class="triangle">
         <br/>
         <p>點我報時</p><br/>
       </div>
     </div>
+    <div class="wing wing-left left-up"></div>
+    <div class="wing wing-left left-middle"></div>
+    <div class="wing wing-left left-down"></div>
+    <div class="wing wing-right right-up"></div>
+    <div class="wing wing-right right-middle"></div>
+    <div class="wing wing-right right-down"></div>
     <div class="clock">
       <div class="clock-face">
         <div class="dot"></div>
diff --git a/cindy/Day2-clock/style.css b/cindy/Day2-clock/style.css
@@ -16,6 +16,7 @@ body {
 
 .chick {
   margin: auto;
+  position: relative;
 }
 
 .triangle {
@@ -26,6 +27,53 @@ body {
   width: 350px;
 }
 
+.wing {
+  background-color: rgb(243, 203, 72);
+  height: 100px;
+  position: absolute;
+  width: 40px;
+}
+
+.wing-left {
+  border-radius: 100px 25px 100px 25px;
+  transform: rotate(100deg);
+}
+
+.left-up {
+  left: -30px;
+  top: 50%;
+}
+
+.left-middle {
+  left: -15px;
+  top: 55%;
+}
+
+.left-down {
+  left: 5px;
+  top: 60%;
+}
+
+.wing-right {
+  border-radius: 25px 100px 25px 100px;
+  transform: rotate(-100deg);
+}
+
+.right-up {
+  right: -30px;
+  top: 50%;
+}
+
+.right-middle {
+  right: -15px;
+  top: 55%;
+}
+
+.right-down {
+  right: 5px;
+  top: 60%;
+}
+
 .clock {
   background-color: rgb(243, 203, 72);
   border-radius: 50%;
@@ -80,7 +128,3 @@ body {
   position: relative;
   width: 1rem;
 }
-
-.time-audio {
-  display: none;
-}
