style: optimize footer

layout/_partial/footer.ejs

@@ -3,16 +3,16 @@
         <div class="copyright-info info-item">
             &copy;
             <% if (theme.footer.since) { %>
-              <span><%= theme.footer.since %></span> ~
+              <span><%= theme.footer.since %></span> -
             <% } %>
-            <%= date(new Date(), 'YYYY') %> <i class="fas fa-heart"></i> <a href="/"><%= theme.base_info.author || config.author %></a>
+            <%= date(new Date(), 'YYYY') %> <i class="fas fa-heart icon-animate"></i> <a href="/"><%= theme.base_info.author || config.author %></a>
         </div>
         <% if (theme.website_count.busuanzi_count.enable) { %>
             <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
             <div class="website-count info-item">
                 <% if (theme.website_count.busuanzi_count.site_uv) { %>
                     <span id="busuanzi_container_site_uv">
-                        <%- __('site_uv') %> <span id="busuanzi_value_site_uv"></span>
+                        <%- __('site_uv') %> <span id="busuanzi_value_site_uv"></span>&ensp;
                     </span>
                 <% } %>
                 <% if (theme.website_count.busuanzi_count.site_pv) { %>

source/css/layout/_partial/footer.styl

@@ -18,4 +18,8 @@
     margin: 5px 0;
   }
 
+  .icon-animate {
+    animation: icon-animate 1.2s ease-in-out infinite;
+  }
+
 }

source/css/layout/common/animated.styl

@@ -2,12 +2,14 @@ transition() {
   transition: all 0.3s ease;
 }
 
+
 the-transition() {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
+
 the-transition-ease-in() {
   transition-duration: 0.2s;
   transition-timing-function: ease-in;
@@ -28,6 +30,7 @@ the-transition-ease-out() {
   animation-name: fade-in-down;
 }
 
+
 @keyframes fade-in-down {
   0% {
     opacity: 0;
@@ -40,6 +43,24 @@ the-transition-ease-out() {
   }
 }
 
+@keyframes icon-animate {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  10%, 30% {
+    transform: scale(.88);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: scale(1.08);
+  }
+
+  50%, 70% {
+    transform: scale(1.08);
+  }
+}
+
 .title-hover-animation {
   display: inline-block;
   position: relative;
@@ -67,3 +88,5 @@ the-transition-ease-out() {
   }
 
 }
+
+