CSS3動畫邊框顏色

我想使用CSS3爲元素的邊框設置動畫，無論它處於懸停狀態還是正常狀態。有人可以爲我提供一個代碼片段或可以指導嗎？CSS3動畫邊框顏色

我可以做到這一點使用jQuery，但尋找一些純粹的CSS3解決方案。

2012-02-28 coure2011

爲此，您可以使用CSS3 transition。看看這個例子：

下面是主要代碼：

#box { 
    position : relative; 
    width : 100px; 
    height : 100px; 
    background-color : gray; 
    border : 5px solid black; 
    -webkit-transition : border 500ms ease-out; 
    -moz-transition : border 500ms ease-out; 
    -o-transition : border 500ms ease-out; 
    transition : border 500ms ease-out; 
} 

#box:hover { 
    border : 10px solid red; 
}

來源

2012-02-28 05:50:32 Zevan

如果需要過渡到無限運行，嘗試下面的例子：

#box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: gray; 
 
    border: 5px solid black; 
 
    display: block; 
 
} 
 

 
#box:hover { 
 
    border-color: red; 
 
    animation-name: flash_border; 
 
    animation-duration: 2s; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-name: flash_border; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -moz-animation-name: flash_border; 
 
    -moz-animation-duration: 2s; 
 
    -moz-animation-timing-function: linear; 
 
    -moz-animation-iteration-count: infinite; 
 
} 
 

 
@keyframes flash_border { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    50% { 
 
    border-color: black; 
 
    } 
 
    100% { 
 
    border-color: red; 
 
    } 
 
} 
 

 
@-webkit-keyframes flash_border { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    50% { 
 
    border-color: black; 
 
    } 
 
    100% { 
 
    border-color: red; 
 
    } 
 
} 
 

 
@-moz-keyframes flash_border { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    50% { 
 
    border-color: black; 
 
    } 
 
    100% { 
 
    border-color: red; 
 
    } 
 
}

<div id="box">roll over me</div>

來源

2017-11-01 12:18:53 Tahir

雖然此鏈接可以回答這個問題，最好是在這裏有答案的主要部件，並提供鏈接以供參考。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/17804187） – robinCTS 2017-11-01 12:47:43

Heya @Tahir。作爲領導，答案應該是獨立的;雖然他們可以引用外部來源作爲參考，但回答信息不應僅存在於外部網站上。因此，我將JSFiddle代碼自帶到了答案中，將SCSS轉換爲CSS，並將動畫名稱重命名爲flash_border（因爲「flash」名稱與Stack Overflow方面存在衝突）。 – 2017-11-01 12:54:00

@ChrisForrence謝謝老兄 – Tahir 2017-11-02 05:57:01

您可以嘗試，這也...

button { 
 
    background: none; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
    margin: 1em; 
 
    padding: 1em 2em; 
 
    box-shadow: inset 0 0 0 2px #f45e61; 
 
    color: #f45e61; 
 
    font-size: inherit; 
 
    font-weight: 700; 
 
    position: relative; 
 
    vertical-align: middle; 
 
} 
 
button::before, button::after { 
 
    box-sizing: inherit; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.draw { 
 
    -webkit-transition: color 0.25s; 
 
    transition: color 0.25s; 
 
} 
 
.draw::before, .draw::after { 
 
    border: 2px solid transparent; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.draw::before { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.draw::after { 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.draw:hover { 
 
    color: #60daaa; 
 
} 
 
.draw:hover::before, .draw:hover::after { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.draw:hover::before { 
 
    border-top-color: #60daaa; 
 
    border-right-color: #60daaa; 
 
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
} 
 
.draw:hover::after { 
 
    border-bottom-color: #60daaa; 
 
    border-left-color: #60daaa; 
 
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
}

<section class="buttons"> 
 
    <button class="draw">Draw</button> 
 
    </section

來源

2017-11-01 12:55:46

CSS3動畫邊框顏色

回答

相關問題