看到好的特效就應該動手實現它！

代碼看起來一點都不簡潔 ヽ(o_ _)o摔倒

要點：

1. CSS3屬性transition: property|prop1,prop2... duration timing-function delay;；
2. 注意需要的標簽層次感；
3. 創意要新！

效果圖：

exam.gif

代碼部分：

<div class="simple">
  <div class="wrap">
    <span>加入我們</span>
    <div class="bgwt"></div>
  </div>
</div>

<style lang="" scoped>
  .simple{
    height: 100%;
    background-color: #f1f1f3;
    border: 1px solid #fff;
    box-sizing: border-box;
  }
  .wrap {
    position: relative;
    width: 200px;
    height: 50px;
    margin: 100px;
    background-color: #000;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    font-size: 25px;
    border: 1px solid #fff;
    box-shadow: 5px 5px 0px #000;
    overflow: hidden;
  }
  .wrap span {
    position: absolute;
    z-index: 10;
    top: 8px;
    left: 50px;
    color: #fff;
  }
  .bgwt {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  .wrap:hover .bgwt{
    background-color: #fff;
    transform: rotate(180deg);
    transition: background-color,transform .7s ease-in;
  }
  .wrap:hover span{
    color: #000;
    transition: color 1s;
  }
</style>