網(wǎng)站前端制作之css按鈕動畫效果

了解更多的按鈕是很多網(wǎng)站頁面的組成部分，為了使設(shè)計出來的頁面更加美觀，按鈕的外觀設(shè)計也重要，按鈕需要實現(xiàn)的鼠標(biāo)效應(yīng)效果主要有默認(rèn)和懸停狀態(tài)，添加鼠標(biāo)懸停,可以豐富優(yōu)化按鈕的設(shè)計，也可以吸引用戶注意力，提升用戶體驗。鼠標(biāo)的默認(rèn)效果大多都是按照設(shè)計圖上的效果實現(xiàn)，鼠標(biāo)的懸停時按鈕從默認(rèn)效果到懸停狀態(tài)的效果的轉(zhuǎn)換效果，可以做到的效果有很多種，例如下面的三種效果：
了解更多
效果一是當(dāng)鼠標(biāo)懸停的時候，背景色從中間往左右兩邊擴散。

了解更多按鈕的樣式效果如下圖：
Css:
.combtn{
text-align: center;
}
.combtn a{
position: relative;
z-index: 1;
display: inline-block;
min-width: 150px;
height: 50px;
line-height: 48px;
border: #666666 solid 1px;
color: #323333;
font-size: 18px;
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
}
.combtn a:hover{
color: #FFFFFF;
border: #85b79a solid 1px;
}
.combtn a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #85b79a;
z-index: -1;
opacity: 0;
-webkit-transform: scale3d(0.7, 1, 1);
transform: scale3d(0.7, 1, 1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.combtn a:hover::before{
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
效果二是當(dāng)鼠標(biāo)懸停的時候，白色線框出現(xiàn)在按鈕里面的四周。

了解更多按鈕的樣式效果如下圖：
Css:
.combtn{
text-align: center;
}
.combtn a{
min-width: 150px;
height: 50px;
line-height: 50px;
color: #FFFFFF;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgb(0 0 0 / 0%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #85b79a;
}
.combtn a:before {
content: '';
position: absolute;
border: white solid 4px;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.combtn a:hover:before, .combtn a:focus:before, .combtn a:active:before {
opacity: 1;
}
效果三是當(dāng)鼠標(biāo)懸停的時候，白色線框出現(xiàn)在按鈕外面的四周。跟上面效果二的效果有些相似，效果二是白色線框在按鈕里面，效果三是綠色線框在按鈕在外面四周。

了解更多按鈕的樣式效果如下圖：
Css:
.combtn{
text-align: center;
}
.combtn a{
min-width: 150px;
height: 50px;
line-height: 50px;
color: #FFFFFF;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgb(0 0 0 / 0%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #85b79a;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgb(0 0 0 / 0%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.combtn a:before {
content: '';
position: absolute;
border: #85b79a solid 4px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.combtn a:hover:before, .combtn a:focus:before, .combtn a:active:before {
top: -8px;
right: -8px;
bottom: -8px;

本文題目：網(wǎng)站前端制作之css按鈕動畫效果
當(dāng)前URL：http://www.muchs.cn/news33/242733.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、建站公司、微信小程序、網(wǎng)站排名、動態(tài)網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)