当我开始动画时，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边框将文本向下移动

回答

相关问题