使用CSS 屬性怎么實現(xiàn)按鈕懸停邊框和背景動畫集合？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括新豐網(wǎng)站建設(shè)、新豐網(wǎng)站制作、新豐網(wǎng)頁制作以及新豐網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，新豐網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到新豐省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

心屬性

opacity: .999 使元素產(chǎn)生一個層疊上下文，這樣按鈕6和8的動畫就不會被背景遮蓋住了

left/top: -1px 使偽元素與按鈕的位置重合，原因在下方

transition-delay 橫向與縱向邊框動畫產(chǎn)生細微的延時效果

z-index: -1 防止動畫產(chǎn)生的顏色塊蓋住按鈕的文字

設(shè)置了left/top/right/bottom的absolute元素，是相對于父元素的padding-box進行定位的，所以這里偽元素要移動一個邊框的距離，才能與按鈕的位置重合，否則會出現(xiàn)下面的效果：

 

可以看到，綠色邊框和灰色邊框有1px的距離

<div class="main-container">
<section>
<button class="btn btn-green btn-border-o">按鈕一</button>
<button class="btn btn-blue btn-border">按鈕二</button>
<button class="btn btn-purple btn-border-rev-o">按鈕三</button>
<button class="btn btn-navy btn-border-rev">按鈕四</button>
</section>
<section>
<button class="btn btn-orange btn-fill-vert-o">按鈕五</button>
<button class="btn btn-red btn-fill-vert">按鈕六</button>
<button class="btn btn-green btn-fill-horz-o">按鈕七</button>
<button class="btn btn-blue btn-fill-horz">按鈕八</button>
</section>
</div>
*, *:before, *:after {
transition: all 0.3s;
}
section {
position: relative;
padding: 5px 0 5px;
text-align: center;
}
.btn {
position: relative;
display: inline-block;
line-height: 35px;
margin: 8px;
padding: 0 15px;
font-size: 15px;
border-radius: 3px;
opacity: .999;
cursor: pointer;
}
.btn-border-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
}
.btn-border-o:before, .btn-border-o:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-o:before {
left: 0;
top: -1px;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border-o:after {
top: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border-o:hover:before {
width: 100%;
}
.btn-border-o:hover:after {
height: 100%;
}
.btn-border-o.btn-green:before, .btn-border-o.btn-green:after {
border-color: #2ecc71;
}
.btn-border-o.btn-green:hover {
color: #2ecc71;
}
.btn-border {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
}
.btn-border:before, .btn-border:after {
position: absolute;
content: '';
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border:before {
top: -1px;
left: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border:after {
top: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border:hover {
background-color: transparent;
}
.btn-border:hover:before {
width: 100%;
}
.btn-border:hover:after {
height: 100%;
}
.btn-border.btn-blue:before, .btn-border.btn-blue:after {
border-color: #3498db;
}
.btn-border.btn-blue:hover {
color: #3498db;
}
.btn-border-rev-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
}
.btn-border-rev-o:before, .btn-border-rev-o:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-rev-o:before {
top: -1px;
right: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
transition-delay: 0.05s;
}
.btn-border-rev-o:after {
left: -1px;
bottom: 0;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
}
.btn-border-rev-o:hover:before {
width: 100%;
}
.btn-border-rev-o:hover:after {
height: 100%;
}
.btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after {
border-color: #9b59b6;
}
.btn-border-rev-o.btn-purple:hover {
color: #9b59b6;
}
.btn-border-rev {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
}
.btn-border-rev:before, .btn-border-rev:after {
content: '';
position: absolute;
border-style: solid;
border-radius: 3px;
box-sizing: content-box;
}
.btn-border-rev:before {
top: -1px;
right: 0;
width: 0;
height: 100%;
border-width: 1px 0 1px 0;
}
.btn-border-rev:after {
bottom: 0;
left: -1px;
width: 100%;
height: 0;
border-width: 0 1px 0 1px;
transition-delay: 0.05s;
}
.btn-border-rev:hover {
background-color: transparent;
}
.btn-border-rev:hover:before {
width: 100%;
}
.btn-border-rev:hover:after {
height: 100%;
}
.btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after {
border-color: #34495e;
}
.btn-border-rev.btn-navy:hover {
color: #34495e;
}
.btn-fill-vert-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
overflow: hidden;
}
.btn-fill-vert-o:before, .btn-fill-vert-o:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 0;
opacity: 0;
z-index: -1;
}
.btn-fill-vert-o:before {
top: 50%;
}
.btn-fill-vert-o:after {
bottom: 50%;
}
.btn-fill-vert-o:hover {
color: #fff;
}
.btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after {
height: 50%;
opacity: 1;
}
.btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after {
background-color: #e67e22;
}
.btn-fill-vert-o.btn-orange:hover {
border-color: #e67e22;
}
.btn-fill-vert {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
overflow: hidden;
}
.btn-fill-vert:before, .btn-fill-vert:after {
content: '';
position: absolute;
width: 100%;
height: 0;
opacity: 0;
left: 0;
z-index: -1;
}
.btn-fill-vert:before {
top: 50%;
}
.btn-fill-vert:after {
bottom: 50%;
}
.btn-fill-vert:hover {
color: #fff;
}
.btn-fill-vert:hover:before, .btn-fill-vert:hover:after {
height: 50%;
opacity: 1;
}
.btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after {
background-color: #e74c3c;
}
.btn-fill-vert.btn-red:hover {
border-color: #e74c3c;
}
.btn-fill-horz-o {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #B8B8B8;
overflow: hidden;
}
.btn-fill-horz-o:before, .btn-fill-horz-o:after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
opacity: 0;
z-index: -1;
}
.btn-fill-horz-o:before {
left: 50%;
}
.btn-fill-horz-o:after {
right: 50%;
}
.btn-fill-horz-o:hover {
color: #fff;
}
.btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after {
width: 50%;
opacity: 1;
}
.btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after {
background-color: #2ecc71;
}
.btn-fill-horz-o.btn-green:hover {
border-color: #2ecc71;
}
.btn-fill-horz {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
color: #a6a6a6;
overflow: hidden;
}
.btn-fill-horz:before, .btn-fill-horz:after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
opacity: 0;
z-index: -1;
}
.btn-fill-horz:before {
left: 50%;
}
.btn-fill-horz:after {
right: 50%;
}
.btn-fill-horz:hover {
color: #fff;
}
.btn-fill-horz:hover:before, .btn-fill-horz:hover:after {
width: 50%;
opacity: 1;
}
.btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after {
background-color: #3498db;
}
.btn-fill-horz.btn-blue:hover {
border-color: #3498db;
}

看完上述內(nèi)容，你們掌握使用CSS 屬性怎么實現(xiàn)按鈕懸停邊框和背景動畫集合的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：使用CSS屬性怎么實現(xiàn)按鈕懸停邊框和背景動畫集合
文章地址：http://aaarwkj.com/article36/gjdopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站策劃、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(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)