大家好，我是若川。邀你進源碼共讀群學習交流。今天分享一篇好文。可收藏～
近期工作中遇到一個需求——實作一些酷炫的按鈕，看到效果圖之後，按鈕确實漂亮，有彈跳、顔色漸變、掃光、霓虹燈，瞬間激起了我的好奇心，開啟了研究實作之路。
所有button.gif
一、基礎儲備
實作這些漂亮的按鈕主要利用了一些CSS的屬性，主要有animation、background-size、background-position、linear-gradient(),下面對這四個内容進行簡要概述。
1.1 animation
animation
animation: name duration timing-function delay iteration-count direction; 1.2 background-size
background-size
background-size: length|percentage|cover|contain; 1.3 background-position
為每一個背景圖檔設定初始位置。這個位置是相對于由 background-position
定義的位置圖層的，詳細用法可參考MDN.background-origin
在使用這個屬性時有一個位置必須特别注意，否則很難了解為什麼background-position指定的位置和自己想要的不一樣，這個位置就是其百分比的計算公式，通過下面公式就可以了解設定百分比後背景圖檔成了什麼結果了：
background-postion:x y;
x：{容器(container)的寬度—背景圖檔的寬度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景圖檔的高度}*y百分比，超出的部分隐藏。 1.4 linear-gradient
函數用于建立一個表示兩種或多種顔色線性漸變的圖檔。其結果屬于linear-gradient()
資料類型，是一種特别的<gradient>
資料類型，其文法如下所示，詳細用法可參考MDN：<image>
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 二、效果實作
下面的四種動畫效果其實就是充分利用CSS屬性實作的，讓我們具體來看看都是如何實作的。
2.1 彈跳效果
第一種效果是彈跳效果，所謂彈跳效果就是按鈕在大小之間變換，其思想如下：
- 建立一個靜态的按鈕；
- 然後利用animation屬性，建立動畫，當變換到50%時，按鈕變換到1.2倍，到動畫100%時按鈕又恢複原樣。
button1.gif
<div class="button1">
<span>立即下載下傳</span>
</div> .button1 {
width: 200px;
height: 46px;
line-height: 46px;
background: #2e82ff;
color: #ffffff;
font-size: 18px;
border-radius: 27px;
animation: zoomIn 1.5s infinite;
text-align: center;
}
@keyframes zoomIn {
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
} 2.2 顔色漸變效果
第二種是顔色漸變效果，所謂顔色漸變效果就是顔色從一種顔色到另一種顔色，然後循環如此，其思想如下：
- 建立一個靜态按鈕；
- 添加漸變顔色對稱的的背景色；
- 背景色x軸方向拉伸至200%，這樣就可以讓原來對稱軸處的背景色由中間到了右側；
- 最後利用animation實作操作位置的動畫，模拟出顔色不斷漸變的動畫。
button2.gif
<div class="button2">
<span>立即下載下傳</span>
</div> .button2 {
display: inline-block;
width: 200px;
height: 46px;
line-height: 46px;
color: #ffffff;
font-size: 18px;
border-radius: 27px;
text-align: center;
background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);
background-size: 200%;
animation: colorGradient 1.5s infinite;
}
@keyframes colorGradient {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
} 2.3 掃光效果
第三種是掃光效果，所謂掃光指的就是一個白色透明顔色從一端不斷向另一端掃描，其思想如下：
- 建立一個靜态按鈕；
- 在靜态按鈕前利用::before僞元素，設定該元素的背景色為白色微透明的顔色，并将該中心位置通過縮放移動到容器右側；
- 利用animation實作動畫，并不斷變換位置實作掃光效果。
button3.gif
<div class="button3">
<span>立即下載下傳</span>
</div> .button3 {
width: 200px;
height: 46px;
line-height: 46px;
background-color: #2e82ff;
color: #ffffff;
font-size: 18px;
text-align: center;
border-radius: 27px;
position: relative;
}
.button3::before {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
background-size: 200%;
animation: wipes 1s infinite;
}
@keyframes wipes {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
} 2.4 霓虹燈效果
第四種是霓虹燈效果，所謂霓虹燈效果其實更像一種斜線在不斷移動，其原理如下所示：
- 建立一個靜态按鈕；
- 在靜态按鈕前利用::before僞元素，設定該元素的背景色為傾斜的霓虹燈效果，該效果實作是通過建立一個20px * 20px的正方形背景，然後利用linear-gradient将背景色135°方向漸變傾斜，實作小傳回的霓虹燈，然後通過背景不斷repeat實作整個的效果；
- 利用animation實作動畫，并不斷變換位置實作霓虹燈效果。
button4.gif
<div class="button4">
<span>立即下載下傳</span>
</div> .button4 {
width: 200px;
height: 46px;
line-height: 46px;
background: #2e82ff;
color: #ffffff;
font-size: 18px;
border-radius: 27px;
text-align: center;
position: relative;
overflow: hidden;
}
.button4:before {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background-size: 20px 20px;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.1) 75%,rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
animation: moveblock 0.5s linear infinite;
}
@keyframes moveblock{
0% {
background-position: 0px 0px;
}
100% {
background-position: 20px 0px;
}
} ················· 若川簡介 ·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇，在知乎、收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點選檢視年度總結。同時，活躍在知乎@若川，@若川。緻力于分享前端開發經驗，願景：幫助5年内前端人走向前列。