亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合

  發(fā)布時(shí)間：2019-05-09 11:41:47   作者：佚名   我要評(píng)論
這篇文章主要介紹了基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合,需要的朋友可以參考下

心屬性

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

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

transition-delay 橫向與縱向邊框動(dòng)畫產(chǎn)生細(xì)微的延時(shí)效果

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

設(shè)置了left/top/right/bottom的absolute元素，是相對(duì)于父元素的padding-box進(jìn)行定位的，所以這里偽元素要移動(dòng)一個(gè)邊框的距離，才能與按鈕的位置重合，否則會(huì)出現(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;
}

總結(jié)

以上所述是小編給大家介紹的基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合 ,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

  • CSS+JS實(shí)現(xiàn)水滴漣漪動(dòng)畫按鈕效果的示例代碼

    這篇文章主要介紹了CSS+JS實(shí)現(xiàn)水滴漣漪動(dòng)畫按鈕，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2020-08-26

  • css實(shí)現(xiàn)抖音訂閱按鈕動(dòng)畫效果

    這篇文章主要介紹了css實(shí)現(xiàn)抖音訂閱按鈕動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-12

  • CSS實(shí)現(xiàn)菜單按鈕動(dòng)畫

    這篇文章主要介紹了CSS實(shí)現(xiàn)菜單按鈕動(dòng)畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2019-04-12

  • 純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

    這篇文章主要介紹了純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-26

  • 基于 CSS 動(dòng)畫的 SVG 按鈕實(shí)例代碼

    本文通過實(shí)例代碼給大家介紹了基于 CSS 動(dòng)畫的 SVG 按鈕的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-10-12

  • 基于css實(shí)現(xiàn)炫酷按鈕動(dòng)畫效果案例代碼

    按鈕在開發(fā)中使用的頻率非常的高，ui 框架中的按鈕組件也都是層出不窮，今天教大家僅用 css 實(shí)現(xiàn)一些非常炫酷的按鈕效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧
    2023-02-28

最新評(píng)論