CSS微动画 - 善加利用伪元素可以做出更多变化

Q: 别人网站上看到的动态效果变化很多，还是引写好的套件(库)进专案吧？
A: 只引进一个套件(库)就可以满足你的需求吗？还是要引进很多个？

伪元素也是制作「微动画」的好夥伴之一

之前有提到伪类指的是元素的状态；这里的伪元素是css在元素中新增的内容::before及::after，它们可以当作元素对其下样式，但不是真正的元素！特别要注意的是伪元素在使用时一定要有属性content，如果没有content属性的话，那麽下再多样式都是看不到的！

/* 以下每个范例都将使用相同的基础html及css，如下：*/
<style>
  .btn {
    position: relative;
    width: 150px;
    line-height: 60px;
    font-size: 20px;
    color: RoyalBlue;
    text-align: center;
    background-color: Lavender;
    cursor: pointer;
    transition: .1s;
  }
</style>
  
<div class="btn">I'm a button</div>

利用伪元素做出底线效果

在这里使用::before并定位在.btn的最下方，在原本的状态时让它的宽度为0，:hover时让它的宽度变为100%，而由於元素的transition属性不会继承给伪元素使用，所以对::before也要下transition才会有渐变的效果。

<style>
  .btn_underline::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 0;
    background-color: RoyalBlue;
    transition: .3s;
  }
  .btn_underline:hover::before {
    width: 100%;
    left: 0;
  }
</style>

利用伪元素做出第二个外框

在这里使用::before并依照父元素的上下左右定位，并在:hover时让它的定位为负的，这时候元素会向外延伸，以达到外框向外的效果。

<style>
  .btn_border::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid Lavender;
    transition: .2s;
  }
  .btn_border:hover::before {
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
  }
</style>

利用伪元素做出第二个背景

<style>
  .btn_background {
    transform: perspective(1px) translateZ(0)
  }
  .btn_background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: RoyalBlue;
    transform: scale(0);
    transition: .3s;
    z-index: -1;
  }
  .btn_background:hover {
    color: Lavender;
  }
  .btn_background:hover::before {
    transform: scale(1);
  }
</style>

找到战友，创造出不同的组合技

谜音：不要猪队友！你也可以开发出超炫招式！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！