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

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

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站制作和雅安電信機(jī)房的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗(yàn)和案例。

特效一覽

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

背景高亮：

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

色塊進(jìn)出：

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

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

效果圖

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

原理

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

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

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

注意：代碼是通過(guò)scaleX來(lái)實(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ì)顯示（有些坑）。

其次，色塊大小改變是通過(guò)scaleY來(lái)設(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);
}

到此，相信大家對(duì)“web前端字體特效的實(shí)現(xiàn)方法是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享名稱：web前端字體特效的實(shí)現(xiàn)方法是什么
文章地址：http://www.rwnh.cn/article42/jiphec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作、企業(yè)建站、外貿(mào)建站、網(wǎng)頁(yè)設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

特效一覽

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

效果圖

原理

代碼

背景高亮

效果圖

原理

代碼

色塊進(jìn)出

效果圖

原理

代碼