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

時間 2021-05-25

標籤 css html 前端 web dom 工具學習開發工具動畫 spa 欄目 HTML 简体版

原文原文鏈接

特效一覽

劃線動態：css

背景高亮：html

色塊進出：前端

劃線動態

效果圖

原理

首先，利用::after和::before就能夠畫出上下兩條線，因此只須要一個 dom 元素便可。web

其次，對於鼠標移入的動畫，要給上面兩個僞元素設置:hover選擇器。dom

最後是處理動畫方向。咱們以上面的線條爲例，在鼠標移入的時候，是從右到左變化的。這裏是經過設置transform-origin屬性來修改動畫方向。下面的線條同理，方向相反便可。工具

注意：代碼是經過scaleX來實現縮放，相比於設置width，會啓用 GPU，避免重繪。學習

代碼

html 代碼：開發工具

<body>
  <span>xin-tan.com</span>
</body>
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視頻教程，但願新手少走彎路

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);
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視頻教程，但願新手少走彎路

背景高亮

效果圖

原理

首先，利用::before僞元素就能夠模擬出覆蓋須要的色塊。因此僅僅須要一個 dom 元素。這裏僞元素的content元素必須給，不然不會顯示（有些坑）。spa

其次，色塊大小改變是經過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);
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視頻教程，但願新手少走彎路

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。