增加关闭按钮，对圣诞的按钮作更换为图片

components/default/christmas.vue

@@ -3,7 +3,7 @@
     <div class="christmas-modal">
       <div class="christmas-info" v-if="!hasNewYear">
         <a href="/activity/business" target="_blank"></a>
-        <a href="javascript:void(0)" @click="close">×</a>
+        <a href="javascript:void(0)" @click="close"></a>
         <div class="christmas-img">
           <img src="/images/christmas/christmas1.png">
           <img src="/images/christmas/christmas2.png">
@@ -17,12 +17,12 @@
           <img src="/images/christmas/festival_deng2.png">
           <img src="/images/christmas/festival_deng1.png">
           <img src="/images/christmas/festival_deng2.png">
-          <img src="/images/christmas/festival2.gif">
-          <img src="/images/christmas/festival1.gif">
+          <img src="/images/christmas/festival_yanhuaright.gif">
+          <img src="/images/christmas/festival_yanhualeft.gif">
         </div>
         <a href="/activity/business" target="_blank">马上开店</a>
         <a @click="close">立刻购买</a>
-        <!--<a href="javascript:void(0)" @click="close">×</a>-->
+        <a href="javascript:void(0)" @click="close"></a>
       </div>
     </div>
   </div>
@@ -105,6 +105,13 @@
     -o-animation: newYearBtn .2s .1s infinite;
     -webkit-animation: newYearBtn .2s .1s infinite;
   }
+  .festival-info a:nth-child(4){
+    top:447px;
+    left:630px;
+    width: 45px;
+    height: 45px;
+    background: url('/images/christmas/close.png')no-repeat center center;
+  }
   .christmas-info a:first-child{
     top:72%;
     left:39%;
@@ -123,14 +130,9 @@
   .christmas-info a:nth-child(2){
     top:8%;
     left:85%;
-    width: 36px;
-    height: 36px;
-    font-size: 48px;
-    line-height: 28px;
-    text-align: center;
-    color: #8a8a8a;
-    background: #f6f6f6;
-    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    background: url('/images/christmas/close.png')no-repeat center center;
   }
   .christmas-info .christmas-img img{
     position:absolute;
@@ -152,7 +154,10 @@
     -ms-transform-origin: top center;
     -o-transform-origin: top center;
     transform-origin: top center;
-    animation:newYearImg 5s linear 2.5s infinite
+    animation:newYearImg 7s linear 3.5s infinite;
+    -o-animation:newYearImg 7s linear 3.5s infinite;
+    -webkit-animation:newYearImg 7s linear 3.5s infinite;
+    -moz-animation:newYearImg 7s linear 3.5s infinite;
   }
   .festival-info .festival-img img:nth-child(3){
     top:80px;
@@ -162,7 +167,10 @@
     -ms-transform-origin: top center;
     -o-transform-origin: top center;
     transform-origin: top center;
-    animation:newYearImg 5s linear 2.5s infinite
+    animation:newYearImg 5s linear 2.5s infinite;
+    -o-animation:newYearImg 5s linear 2.5s infinite;
+    -webkit-animation:newYearImg 5s linear 2.5s infinite;
+    -moz-animation:newYearImg 5s linear 2.5s infinite;
   }
   .festival-info .festival-img img:nth-child(4){
     top:219px;
@@ -172,10 +180,10 @@
     -ms-transform-origin: top center;
     -o-transform-origin: top center;
     transform-origin: top center;
-    animation:newYearImg 5s linear infinite;
-    -o-animation:newYearImg 5s linear infinite;
-    -moz-animation:newYearImg 5s linear infinite;
-    -webkit-animation:newYearImg 5s linear infinite;
+    animation:newYearImg 7s linear infinite;
+    -o-animation:newYearImg 7s linear infinite;
+    -moz-animation:newYearImg 7s linear infinite;
+    -webkit-animation:newYearImg 7s linear infinite;
   }
   .festival-info .festival-img img:nth-child(5){
     top:80px;
@@ -193,10 +201,14 @@
   .festival-info .festival-img img:nth-child(6){
     top:-165px;
     left:615px;
+    opacity:.75;
+    /*animation: newYearYanHua 5s infinite;*/
   }
   .festival-info .festival-img img:nth-child(7){
-    top:495px;
+    top:420px;
     left:-105px;
+    opacity:.75;
+    /*animation: newYearYanHua 5s 1s infinite;*/
   }
   .christmas-info .christmas-img img:nth-child(2){
     animation: christmas2 25s infinite;
@@ -316,9 +328,35 @@
   }
   @keyframes newYearImg {
     0%{transform: rotate(0deg);}
-    25%{transform: rotate(-30deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @-o-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
     50%{transform: rotate(0deg);}
-    75%{transform: rotate(30deg);}
+    75%{transform: rotate(15deg);}
     100%{transform: rotate(0deg);}
   }
+  @-webkit-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @-moz-keyframes newYearImg {
+    0%{transform: rotate(0deg);}
+    25%{transform: rotate(-15deg);}
+    50%{transform: rotate(0deg);}
+    75%{transform: rotate(15deg);}
+    100%{transform: rotate(0deg);}
+  }
+  @keyframes newYearYanHua {
+    0%{opacity:1;transform:scale(0);}
+    26%{opacity:1;transform:scale(.7);}
+    100%{transform:scale(1);opacity:0;}
+  }
 </style>