技術標籤：cssvueanimate.css

1. 在什麼情況下，用translate()而不用絕對定位

需要基於元素自身尺寸進行定位時，使用translate；

需要基於某個祖先元素的尺寸進行定位時，使用position:absolute

2. vue直接引用animate.css 動畫不起作用問題

由於vue官網引用的是animate.css 3.5版本，其無法向上相容最新的animate.css版本，這就導致了直接npm install animate.css後，動畫壓根無法生效。

因此解決方案就是安裝對應低版本的animate.css：

• 安裝依賴：

   npm install 
   
  [email protected] --save
  

• main.js全域性引入：

  import animated from "animate.css"
  
  Vue.use(animated)
  

轉載連結：Vue------關於 Vue 引用 animate.css 動畫 不起作用的問題（animate.css）_COCOLI_BK的部落格-CSDN部落格

3. css: 滑鼠滑過的卡片/按鈕流光效果

當用戶用滑鼠滑過按鈕的時候，一道流光會瞬間滑過按鈕，就像玻璃的反光效果，非常漂亮。

css:

  .button {
   display: block;
   position
 
: relative;
   background: #00B16A;
   color: #fff;
   width: 160px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   font-family: 'Ubuntu', sans-serif;
   font-size: 15px;
   font-weight: bold;
   text-decoration: none;
   margin: 50px auto 0;
   border-radius: 2px;
   overflow: hidden;
   -webkit-transition
 
: all 0.15s ease-in;
   transition: all 0.15s ease-in;
  }
  .button:hover {
   background: #26C281;
  }
  .button:before {
   content: ' ';
   position: absolute;
   background: #fff;
   width: 25px;
   height: 50px;
   top: 0;
   left: -45px;
   opacity: 0.3;
   -webkit-transition: all 0.25s ease-out;
   transition: all 0.25s ease-out;
   -webkit-transform: skewX(-25deg);
           transform: skewX(-25deg);
  }
  .button:hover:before {
   width: 45px;
   left: 205px;
  }

這裡舉了中間綠色按鈕的流光效果css程式碼例子，衍生到類似的物件上思路類似，微調顏色、尺寸等即可

轉載連結：純CSS3滑鼠滑過按鈕流光效果效果演示_jQuery之家-自由分享jQuery、html5、css3的外掛庫 (htmleaf.com)

Smile and let everyone know that today you’re a lot stronger than you were yesterday.
用微笑告訴世人，今天的你比昨天更加強大。