From 85b526f08a578712b52d4a0e9e1d13b09c95d993 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 27 Nov 2020 15:32:40 +0800
Subject: [PATCH] style: optimize footer

---
 layout/_partial/footer.ejs             |  6 +++---
 source/css/layout/_partial/footer.styl |  4 ++++
 source/css/layout/common/animated.styl | 23 +++++++++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index e8ce6fd..dc478c4 100644
--- a/layout/_partial/footer.ejs
+++ b/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) { %>
diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl
index 5c76ff2..81d4eda 100644
--- a/source/css/layout/_partial/footer.styl
+++ b/source/css/layout/_partial/footer.styl
@@ -18,4 +18,8 @@
     margin: 5px 0;
   }
 
+  .icon-animate {
+    animation: icon-animate 1.2s ease-in-out infinite;
+  }
+
 }
diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl
index 5ad5b04..e1724e4 100644
--- a/source/css/layout/common/animated.styl
+++ b/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() {
   }
 
 }
+
+