前端動畫專題（一）：字體特效

時間 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);
}
複製代碼