CSS動畫設計專題（一）：字體特效

gclove 發布于2019-08-30 15:44 / 2010人閱讀

摘要：代碼這里不要指明為更多文章動畫設計字體特效動畫設計輸入框特效動畫設計按鈕特效動畫設計特效基礎篇動畫設計特效進階篇

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

歡迎交流和Star

特效一覽

劃線動態：

背景高亮：

色塊進出：

劃線動態 效果圖

原理

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

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

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

注意：代碼是通過scaleX來實現縮放，相比于設置width，會啟用 GPU，避免重繪。

代碼

html 代碼：


  xin-tan.com

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 代碼：


  xin-tan.com

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:


  xin-tan.com

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);
}

更多文章

動畫設計·字體特效

動畫設計·輸入框特效

動畫設計·按鈕特效

動畫設計·Loader特效·基礎篇

動畫設計·Loader特效·進階篇

云服務器 GPU云服務器 html彩色字體特效 css特效 css字體庫 css 服務器字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116155.html

前端動畫專題（三）：撩人的按鈕特效

摘要：下面開始編寫動畫的特效。視覺上會有一種彈簧的特效，就像手壓果凍后的效果脈沖特效效果圖原理和代碼首先，還是去掉的默認樣式。本文來自「心譚博客」的《動畫設計·按鈕特效》，更多文章放在了Github歡迎交流和Star 特效一覽滑箱： showImg(https://segmentfault.com/img/remote/1460000019951279); 果凍： showImg(ht...

sarva 2019-08-30 15:44 評論0 收藏0
前端動畫專題（三）：撩人的按鈕特效

摘要：下面開始編寫動畫的特效。視覺上會有一種彈簧的特效，就像手壓果凍后的效果脈沖特效效果圖原理和代碼首先，還是去掉的默認樣式。本文來自「心譚博客」的《動畫設計·按鈕特效》，更多文章放在了Github歡迎交流和Star 特效一覽滑箱： showImg(https://segmentfault.com/img/remote/1460000019951279); 果凍： showImg(ht...

Jokcy 2019-08-26 10:31 評論0 收藏0
css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
前端硬核面試專題之 CSS 55 問

摘要：前言本文講解道前端面試的的內容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數據結構與算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 55 道前端面試的 CSS 的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章...

崔曉明 2019-08-30 15:44 評論0 收藏0
好看漂亮的html5網頁特效學習筆記(1)_水墨動畫

摘要：對于來說，表示元素，除了優先級更高之外，與選擇器相同。從父元素繼承顏色漸變背景漂亮的深藍淺藍效果就是這個的作用。媒體查詢，簡單來說就是可以讓網頁自動適應不同的設備屏幕尺寸。具體請看貝塞爾曲線，用來生成水墨效果的關鍵。 showImg(https://segmentfault.com/img/bVbwNaj); 效果鼠標觸碰按鈕，出現水墨風格動畫屏幕自適應一份html文件，一份c...

habren 2019-08-30 15:44 評論0 收藏0