當我開始動畫時，CSS邊框將文本向下移動

在我製作的網站上，我試圖創建一個邊框動畫，在圖像周圍反覆閃爍黃色和紫色。我出來這個：當我開始動畫時，CSS邊框將文本向下移動

@-webkit-keyframes battle { 
    0% { 
    border:5px solid yellow; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    padding: 0px; 
    } 
    50% { 
    border:5px solid purple; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    padding: 0px; 
    } 
}

我激活它與一個：懸停元素。但是，當我將鼠標懸停在它上面時，邊框出現並重復地將文本向上和向下推動。我試圖爲動畫元素添加一個邊框，但動畫邊框剛剛位於邊框的頂部。

有沒有辦法解決這個問題？任何幫助都會很棒。

來源

2017-08-04 Kumquat

首先，什麼是'battle'？它是一個班級還是一個ID？ – clabe45

您可以在未懸停時添加透明邊框。這樣，尺寸不會改變。 – Kangouroops

@ clabe45它的動畫名稱 – Kumquat

在要製作動畫的元素的類中設置基本邊框，然後讓動畫僅處理邊框顏色的更改。

.animated { 
 
    border: 5px solid transparent; /** the basic border **/ 
 
    border-radius: 25px; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

 
.animated:hover { 
 
    animation: battle 1s infinite alternate; 
 
} 
 

 
@keyframes battle { 
 
    from { 
 
     border-color: yellow; 
 
    } 
 

 
    to { 
 
     border-color: purple; 
 
    } 
 
}

<div class="animated"> 
 
    This is the content 
 
</div>

來源

2017-08-04 19:48:00

哇，非常感謝！ – Kumquat

當我開始動畫時，CSS邊框將文本向下移動

回答

相關問題