建站
咨詢
售后
建站咨詢
新聞中心
所有button.gif
成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|企業(yè)網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋汽車玻璃修復(fù)等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。
一、基礎(chǔ)儲備
實(shí)現(xiàn)這些漂亮的按鈕主要利用了一些CSS的屬性，主要有animation、background-size、background-position、linear-gradient(),下面對這四個內(nèi)容進(jìn)行簡要概述。
1.1 animation
animation 屬性用來指定一組或多組動畫，每組之間用逗號相隔，其語法如下所示，詳細(xì)用法可參考MDN：
animation: name duration timing-function delay iteration-count direction;
1.2 background-size
background-size 設(shè)置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸，其語法如下所示，詳細(xì)用法可參考MDN：
background-size: length|percentage|cover|contain;
1.3 background-position
background-position 為每一個背景圖片設(shè)置初始位置。這個位置是相對于由 background-origin 定義的位置圖層的，詳細(xì)用法可參考MDN.
在使用這個屬性時有一個位置必須特別注意，否則很難理解為什么background-position指定的位置和自己想要的不一樣，這個位置就是其百分比的計算公式，通過下面公式就可以理解設(shè)定百分比后背景圖片成了什么結(jié)果了：
background-postion:x y;
x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。
1.4 linear-gradient
linear-gradient() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于數(shù)據(jù)類型，是一種特別的數(shù)據(jù)類型，其語法如下所示，詳細(xì)用法可參考MDN：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
二、效果實(shí)現(xiàn)
下面的四種動畫效果其實(shí)就是充分利用CSS屬性實(shí)現(xiàn)的，讓我們具體來看看都是如何實(shí)現(xiàn)的。
2.1 彈跳效果
第一種效果是彈跳效果，所謂彈跳效果就是按鈕在大小之間變換，其思想如下：
創(chuàng)建一個靜態(tài)的按鈕;
然后利用animation屬性，創(chuàng)建動畫，當(dāng)變換到50%時，按鈕變換到1.2倍，到動畫100%時按鈕又恢復(fù)原樣。
button1.gif
立即下載
.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 顏色漸變效果
第二種是顏色漸變效果，所謂顏色漸變效果就是顏色從一種顏色到另一種顏色，然后循環(huán)如此，其思想如下：
- 創(chuàng)建一個靜態(tài)按鈕;
- 添加漸變顏色對稱的的背景色;
- 背景色x軸方向拉伸至200%，這樣就可以讓原來對稱軸處的背景色由中間到了右側(cè);
- 最后利用animation實(shí)現(xiàn)操作位置的動畫，模擬出顏色不斷漸變的動畫。
button2.gif
立即下載
.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 掃光效果
第三種是掃光效果，所謂掃光指的就是一個白色透明顏色從一端不斷向另一端掃描，其思想如下：
- 創(chuàng)建一個靜態(tài)按鈕;
- 在靜態(tài)按鈕前利用::before偽元素，設(shè)置該元素的背景色為白色微透明的顏色，并將該中心位置通過縮放移動到容器右側(cè);
- 利用animation實(shí)現(xiàn)動畫，并不斷變換位置實(shí)現(xiàn)掃光效果。
button3.gif
立即下載
.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 霓虹燈效果
第四種是霓虹燈效果，所謂霓虹燈效果其實(shí)更像一種斜線在不斷移動，其原理如下所示：
- 創(chuàng)建一個靜態(tài)按鈕;
- 在靜態(tài)按鈕前利用::before偽元素，設(shè)置該元素的背景色為傾斜的霓虹燈效果，該效果實(shí)現(xiàn)是通過創(chuàng)建一個20px * 20px的正方形背景，然后利用linear-gradient將背景色135°方向漸變傾斜，實(shí)現(xiàn)小返回的霓虹燈，然后通過背景不斷repeat實(shí)現(xiàn)整個的效果;
- 利用animation實(shí)現(xiàn)動畫，并不斷變換位置實(shí)現(xiàn)霓虹燈效果。
button4.gif
立即下載
.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;
}
} 文章題目：聊聊純CSS實(shí)現(xiàn)Beautiful按鈕
分享路徑：http://m.fisionsoft.com.cn/article/coppjcj.html
