web前端動畫專題(3):撩人的按鈕特效
特效一覽
滑箱 :
果凍 :
脈衝 :
閃光 :
氣泡 :
滑箱特效
效果圖
原理
因為 button 元素可以使用 before/after 偽元素,所以藉助偽元素,可以實現動態圖中的遮蓋層。
為了避免迴流重繪,滑箱的運動方向是垂直方向,所以使用
scaleY
屬性。對於動畫的方向,需要藉助
transform-origin
改變動畫原點。
程式碼實現
html:
<button>xin-tan.com</button>
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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
果凍特效
效果圖
原理和程式碼
果凍特效可以分割成 5 個部分,所以無法簡單通過
transition
來實現,要藉助
animation
。並且動畫觸發的時間點是滑鼠移入的時候,因此
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;
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
下面開始編寫 jelly 動畫的特效。這個動畫可以分解為 4 個部分:「初始 => 擠高 => 壓扁 => 回到初始狀態」。擠高 和 壓扁這裡都是通過
scale
來實現的,程式碼如下:
@keyframes jelly {
0%,
100% {
transform: scale(1, 1);
}
33% {
transform: scale(0.9, 1.1);
}
66% {
transform: scale(1.1, 0.9);
}
}
更進一步
上面的動態已經模擬不錯了,如果將 4 部分變成 5 部分:「初始 => 擠高 => 壓扁 => 擠高 => 回到初始狀態」。 視覺上會有一種彈簧的特效 ,就像手壓果凍後的效果:
@keyframes jelly {
0%,
100% {
transform: scale(1, 1);
}
25%,
75% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
脈衝特效
效果圖
原理和程式碼
首先,還是去掉 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
屬性。而鏤空的效果,是通過透明背景來實現的。
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
狀態下的偽元素,目的是讓動畫瞬間回到初始狀態。
閃光特效
效果圖
原理和程式碼
實現上依然是藉助偽元素,閃光特效更多注重的是配色,動畫方面實現的核心是利用
rotate
來實現「傾斜」的效果,利用
translate3d
來實現「閃動」的效果。
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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
⚠️
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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2652766/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- web前端動畫專題(1):字型特效Web前端動畫特效
- web前端動畫專題(2):輸入框特效Web前端動畫特效
- 前端動畫專題(一):字型特效前端動畫特效
- 前端動畫專題(二):輸入框特效前端動畫特效
- CSS3動畫按鈕效果CSSS3動畫
- 前端特效【第02期】|多功能提交按鈕前端特效
- iOS動畫-按鈕動畫iOS動畫
- iOS 按鈕動畫iOS動畫
- 魔幻般冒泡背景的CSS3按鈕動畫CSSS3動畫
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- 美妙的 CSS3 動畫!夢幻般的按鈕效果CSSS3動畫
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 8款超酷而實用的CSS3按鈕動畫CSSS3動畫
- 純CSS3發光按鈕動畫 非常絢麗CSSS3動畫
- JQuery3:動畫和特效jQuery動畫特效
- 精美的web前端原始碼的特效Web前端原始碼特效
- InstaMaterial概念設計(3):feed卡片上的按鈕、評論按鈕
- 新浪微博加號按鈕動畫實現方案動畫
- 1.20 JQuery3:動畫和特效jQuery動畫特效
- CSS3 單選框動畫特效CSSS3動畫特效
- Bootstrap3系列:按鈕組boot
- 第 3 章 表格和按鈕
- 按鈕上面的按鈕 (轉)
- flutter好用的輪子推薦二-點贊按鈕動畫Flutter動畫
- 仿噹噹App首頁按鈕漸變動畫效果APP動畫
- 分享7款頂級的CSS3動畫特效CSSS3動畫特效
- Web前端培訓教程:CSS3動畫怎麼實現的Web前端CSSS3動畫
- EM按鈕亂碼問題
- CSS3 3D立體按鈕CSSS33D
- 從零開始學前端動畫 —— 簡單的特效登入前端動畫特效
- Flutter 敲一個靈動的錄音按鈕動畫 - Speed CodeFlutter動畫
- 點選按鈕動畫方式隱藏和顯示div動畫
- 用屬性動畫實現一個確認按鈕動畫
- 按鈕
- 【css】純CSS3模仿3D星空動畫特效CSSS33D動畫特效
- 前端設計,確定按鈕正慢慢消失前端
- 好程式設計師web前端系列之css3動畫程式設計師Web前端CSSS3動畫
- css3將radio單選按鈕模擬為按鈕形狀CSSS3