前端动画专题（一）：字体特效

时间 2019-11-29

标签前端动画专题字体特效繁體版

原文原文链接

本文来自《动画设计·字体特效》，更多文章放在了Githubcss

欢迎交流和Starhtml

特效一览

划线动态：git

背景高亮：github

色块进出：dom

划线动态

效果图

原理

首先，利用::after和::before就能够画出上下两条线，因此只须要一个 dom 元素便可。字体

其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。动画

最后是处理动画方向。咱们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是经过设置transform-origin属性来修改动画方向。下面的线条同理，方向相反便可。ui

注意：代码是经过scaleX来实现缩放，相比于设置width，会启用 GPU，避免重绘。spa

代码

html 代码：设计

<body>
  <span>xin-tan.com</span>
</body>
复制代码

css 代码：

span {
  color: #595959;
  position: relative;
  z-index: 1;
}

span::before,
span::after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #262626;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}

span::before {
  top: 0;
  transform-origin: center right;
}

span::after {
  bottom: 0;
  transform-origin: center left;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}

span:hover::after {
  transform-origin: center right;
  transform: scaleX(1);
}
复制代码

背景高亮

效果图

原理

首先，利用::before伪元素就能够模拟出覆盖须要的色块。因此仅仅须要一个 dom 元素。这里伪元素的content元素必须给，不然不会显示（有些坑）。

其次，色块大小改变是经过scaleY来设置的，缘由和第一个动画缘由同样。

最后，伪元素的色块会覆盖 dom 上的元素。因此须要给 dom 元素设置z-index，而且让其生效并大于伪元素的z-index。

代码

html 代码：

<body>
  <span>xin-tan.com</span>
</body>
复制代码

css 代码：

span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

/* 1. content必须给 2. 用transform覆盖 配合 z-index */
span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.25em;
  right: -0.25em;
  z-index: -1;
  background: #262626;
  transform: scaleY(0.2);
  transform-origin: center bottom;
  transition: all 0.1s linear;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform: scaleY(1);
}
复制代码

色块进出

效果图

原理

这和上一个“背景高亮”动画相似，不一样的是色块的位置和大小变化方向不一样。其他基本一致。

代码

html:

<body>
  <span>xin-tan.com</span>
</body>
复制代码

css:

span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

span::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #262626;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  /* 这里不要指明为 all */
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}
复制代码