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

心譚發表於2019-07-29
前端動畫特效

本文來自《動畫設計·字型特效》，更多文章放在了Github

歡迎交流和Star

特效一覽

劃線動態：

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

背景高亮：

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

色塊進出：

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

劃線動態

效果圖

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

原理

首先，利用::after和::before就可以畫出上下兩條線，所以只需要一個 dom 元素即可。

其次，對於滑鼠移入的動畫，要給上面兩個偽元素設定:hover選擇器。

最後是處理動畫方向。我們以上面的線條為例，在滑鼠移入的時候，是從右到左變化的。這裡是通過設定transform-origin屬性來修改動畫方向。下面的線條同理，方向相反即可。

注意：程式碼是通過scaleX來實現縮放，相比於設定width，會啟用 GPU，避免重繪。

程式碼

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);
}
複製程式碼

更多文章

相關文章