CSS微动画 - Transform不一定是位移的最佳选择

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写会不会很麻烦？」如果答案都是「不」，不如就当练练功手刻一个，这样不仅可以将整体档案大小缩小（正常情况是会的），还可以不局限於图片不可变的设计！

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