摘要:下面開始編寫動畫的特效。視覺上會有一種彈簧的特效,就像手壓果凍后的效果脈沖特效效果圖原理和代碼首先,還是去掉的默認樣式。
本文來自「心譚博客」的《動畫設計·按鈕特效》,更多文章放在了Github特效一覽歡迎交流和Star
滑箱:
果凍:
脈沖:
閃光:
氣泡:
滑箱特效 效果圖 原理因為 button 元素可以使用 before/after 偽元素,所以借助偽元素,可以實現(xiàn)動態(tài)圖中的遮蓋層。
為了避免回流重繪,滑箱的運動方向是垂直方向,所以使用scaleY屬性。對于動畫的方向,需要借助transform-origin改變動畫原點。
代碼實現(xiàn)html:
css:
button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #40a9ff; padding: 0.5em 1em; } button::before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fa541c; transform-origin: center bottom; transform: scaleY(0); transition: transform 0.4s ease-in-out; } button:hover { cursor: pointer; } button:hover::before { transform-origin: center top; transform: scaleY(1); }果凍特效 效果圖 原理和代碼
果凍特效可以分割成 5 個部分,所以無法簡單通過 transition 來實現(xiàn),要借助animation。并且動畫觸發(fā)的時間點是鼠標移入的時候,因此 animation 要在:hvoer中聲明。
button { z-index: 1; color: white; background: #40a9ff; outline: none; border: none; padding: 0.5em 1em; } button:hover { cursor: pointer; animation: jelly 0.5s; }
下面開始編寫 jelly 動畫的特效。這個動畫可以分解為 4 個部分:「初始 => 擠高 => 壓扁 => 回到初始狀態(tài)」。擠高 和 壓扁這里都是通過scale來實現(xiàn)的,代碼如下:
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 33% { transform: scale(0.9, 1.1); } 66% { transform: scale(1.1, 0.9); } }更進一步
上面的動態(tài)已經仿真不錯了,如果將 4 部分變成 5 部分:「初始 => 擠高 => 壓扁 => 擠高 => 回到初始狀態(tài)」。視覺上會有一種彈簧的特效,就像手壓果凍后的效果:
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 25%, 75% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } }脈沖特效 效果圖 原理和代碼
首先,還是去掉 button 的默認樣式。注意設置 button 的z-index屬性并且讓其生效,要保證其大于 ::before 的 z-index 屬性,防止 dom 元素被偽元素覆蓋。
button { position: relative; z-index: 1; border: none; outline: none; padding: 0.5em 1em; color: white; background-color: #1890ff; } button:hover { cursor: pointer; }
剩下的就是設置偽元素。因為脈沖特效給人的感覺是“鏤空”放大。因此,變化對象是 border 屬性。而鏤空的效果,是通過透明背景來實現(xiàn)的。
button::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; border: 4px solid #1890ff; transform: scale(1); transform-origin: center; }
動畫啟動時間是鼠標移入,border 上變化的是顏色變淡和大小變小,透明度也逐漸變成 0。
button:hover::before { transition: all 0.75s ease-out; border: 1px solid#e6f7ff; transform: scale(1.25); opacity: 0; }
?? transition 和 transform 是放在hover狀態(tài)下的偽元素,目的是讓動畫瞬間回到初始狀態(tài)。
閃光特效 效果圖 原理和代碼實現(xiàn)上依然是借助偽元素,閃光特效更多注重的是配色,動畫方面實現(xiàn)的核心是利用rotate來實現(xiàn)「傾斜」的效果,利用translate3d來實現(xiàn)「閃動」的效果。
button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #262626; padding: 0.5em 1em; overflow: hidden; --shine-width: 1.25em; } button::after { content: ""; z-index: -1; position: absolute; background: #595959; /* 核心代碼:位置一步步調整 */ top: -50%; left: 0%; bottom: -50%; width: 1.25em; transform: translate3d(-200%, 0, 0) rotate(35deg); /* */ } button:hover { cursor: pointer; } button:hover::after { transition: transform 0.5s ease-in-out; transform: translate3d(500%, 0, 0) rotate(35deg); }
??translate3d除了避免重繪回流,還能啟用 GPU 加速,性能更高。但之前為了方便講述,一般使用的是translate屬性。
氣泡特效 效果圖 原理和代碼首先,還是禁用 button 元素的默認樣式,并且調整一下配色:
button { outline: none; border: none; cursor: pointer; color: white; position: relative; padding: 0.5em 1em; background-color: #40a9ff; }
由于 button 的偽元素層級是覆蓋 button 的,所以要設置 z-index 屬性,防止偽元素遮蓋顯示。畢竟只想要背景色的遮蓋,字體不需要遮蓋。在上面的樣式中添加:
button { z-index: 1; overflow: hidden; }
最后處理的是偽元素的變化效果。特效是從中心向四周蔓延,所以應該讓其居中。
對于大小變化,還是利用scale屬性。
因為是圓形,所以將border-radius設置為 50%即可。
button::before { z-index: -1; content: ""; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; border-radius: 50%; background-color: #9254de; transform-origin: center; transform: translate3d(-50%, -50%, 0) scale(0, 0); transition: transform 0.45s ease-in-out; } button:hover::before { transform: translate3d(-50%, -50%, 0) scale(15, 15); }換個方向?
示例代碼中的氣泡特效是從中間向四周擴散,如果想要從左上角向右下角擴散呢?例如下圖所示:
處理過程很簡單,只需要改變一下氣泡的初始位置即可。
button::before { z-index: -1; content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%; background-color: #9254de; /* 變化位置的代碼 */ top: 0; left: 0; transform-origin: center; transform: scale3d(0, 0, 0); transition: transform 0.45s ease-in-out; /* *********** */ } button:hover::before { transform: scale3d(15, 15, 15); }參考鏈接
《transform-origin: 改變動畫原點》
《Increase Your Site’s Performance with Hardware-Accelerated CSS》
《css3 變量》
更多文章動畫設計·字體特效
動畫設計·輸入框特效
動畫設計·按鈕特效
動畫設計·Loader特效·基礎篇
動畫設計·Loader特效·進階篇
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106299.html
摘要:下面開始編寫動畫的特效。視覺上會有一種彈簧的特效,就像手壓果凍后的效果脈沖特效效果圖原理和代碼首先,還是去掉的默認樣式。 本文來自「心譚博客」的《動畫設計·按鈕特效》,更多文章放在了Github歡迎交流和Star 特效一覽 滑箱: showImg(https://segmentfault.com/img/remote/1460000019951279); 果凍: showImg(ht...
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發(fā)的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發(fā)的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
摘要:道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的,使用自主研發(fā)的渲染引擎,和都使用網絡用來 道阻且長啊TAT(前端面試總結) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括: 用戶界面- 包括地址欄、后退/前...
閱讀 1439·2021-11-11 16:54
閱讀 9319·2021-11-02 14:44
閱讀 2371·2021-10-22 09:53
閱讀 3259·2019-08-30 11:18
閱讀 1950·2019-08-29 13:29
閱讀 2002·2019-08-27 10:58
閱讀 1622·2019-08-26 11:38
閱讀 3518·2019-08-26 10:31