溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

web前端字體特效的實(shí)現(xiàn)方法是什么

發(fā)布時(shí)間：2021-11-06 13:40:50 來源：億速云 閱讀：314 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“web前端字體特效的實(shí)現(xiàn)方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“web前端字體特效的實(shí)現(xiàn)方法是什么”吧!

特效一覽

劃線動(dòng)態(tài)：

web前端字體特效的實(shí)現(xiàn)方法是什么

背景高亮：

web前端字體特效的實(shí)現(xiàn)方法是什么

色塊進(jìn)出：

web前端字體特效的實(shí)現(xiàn)方法是什么

劃線動(dòng)態(tài)

效果圖

web前端字體特效的實(shí)現(xiàn)方法是什么

原理

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

其次，對于鼠標(biāo)移入的動(dòng)畫，要給上面兩個(gè)偽元素設(shè)置:hover選擇器。

最后是處理動(dòng)畫方向。我們以上面的線條為例，在鼠標(biāo)移入的時(shí)候，是從右到左變化的。這里是通過設(shè)置transform-origin屬性來修改動(dòng)畫方向。下面的線條同理，方向相反即可。

注意：代碼是通過scaleX來實(shí)現(xiàn)縮放，相比于設(shè)置width，會(huì)啟用 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);
}

背景高亮

效果圖

web前端字體特效的實(shí)現(xiàn)方法是什么

原理

首先，利用::before偽元素就可以模擬出覆蓋需要的色塊。所以僅僅需要一個(gè) dom 元素。這里偽元素的content元素必須給，否則不會(huì)顯示（有些坑）。

其次，色塊大小改變是通過scaleY來設(shè)置的，原因和第一個(gè)動(dòng)畫原因一樣。

最后，偽元素的色塊會(huì)覆蓋 dom 上的元素。所以需要給 dom 元素設(shè)置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);
}

色塊進(jìn)出

效果圖

web前端字體特效的實(shí)現(xiàn)方法是什么

原理

這和上一個(gè)“背景高亮”動(dòng)畫類似，不同的是色塊的位置和大小變化方向不同。其余基本一致。

代碼

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前端字體特效的實(shí)現(xiàn)方法是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

web
AI
助
手