20201207 - 前端业务项目的日常记录

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.
用微笑告诉世人，今天的你比昨天更加强大。