Q: 效能跟效果之間怎麼取捨？
A: 如果效果不複雜，用一些渲染成本比較高的寫法也無妨

新屬性搭配動畫來點新效果

本篇介紹一個新的屬性-webkit-background-clip，這個屬性的預設值為border-box代表背景的邊界為border，今天要來做的效果是將這個屬性的值改為text。將該屬性的值設定為text後，背景將會顯示在文字上，有點像是以文字作為背景的遮罩，讓文字背景依照文字的形狀顯示。

<style>
  .container {
    font-size: 50px;
    font-weight: bolder;
    line-height: 1;
    letter-spacing: -1px;
    background-image: linear-gradient(Pink, Gray); 
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
  }
</style>

<div class="container">
  文字也可以美美的動起來～
</div>

為什麼背景色沒有跑出來？

這裡要特別注意的是因為是由背景依照文字的邊框顯示的，如果文字有顏色的話就會把背景蓋過去，所以要下color: transparent將文字顏色變成透明的．這樣才會顯示出背景的顏色。

<style>
  .container {
    color: transparent;
  }
</style>

Animation的時候到了

來做個光閃過的樣子，用到偽元素替元素新增一個白色的底，並讓它位移。雖然之前有提到效能對動畫的影響，但本篇的例子不使用transform做位移，原因是如果將left改成transform，那麼位移的幅度就會不相同。

• transform: translateX(100%):
  transform為元素本身的變形，translateX(100%)是針對.container::before做變形，而其寬度只有3px，所以位移的時候只會有3px。
• left: 100%
  100%的位移程度為.container的寬度100%，所以可以達到下圖效果。

<style>
  .container {
    position: relative;
  }
  .container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    box-shadow: 0 0 10px 10px White;
    background-color: White;
    transform: rotate(-20deg) scale(1.5);
    animation: shining 2s infinite linear;
  }
  @keyframes shining {
    0%, 50% {
      left: 100%
    }
    100% {
      left: -10%;
    }
  }
</style>

謎音：又是考驗美感的時候，請大家體諒工程師的腦袋就這樣了(〃∀〃)

竭盡最後靈感生出來的第29篇文章，突然很佩服設計師的腦袋，那是達不到的境界啊！！但如果將Css屬性掌握好，想要把設計師的圖片變成網頁上實際上會跑的樣式，那就不會是太大的問題～～

所以以後當看到圖片時，可以先想想「這個一定要出圖嗎？如果用Css寫會不會很麻煩？」如果答案都是「不」，不如就當練練功手刻一個，這樣不僅可以將整體檔案大小縮小（正常情況是會的），還可以不侷限於圖片不可變的設計！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！