Question

在我制作的网站上，我试图创建一个边框动画，在图像周围反复闪烁黄色和紫色。我出来了：

@-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;
    }
}

我使用：hover元素激活它。然而，当我将鼠标悬停在它上面时，边框出现并反复向上和向下推动文本。我试图为动画元素添加边框，但动画边框只是在边框顶部。

有没有办法解决这个问题？任何帮助都会很棒。

Answer 1

在要设置动画的元素的类中设置基本边框，然后让动画仅处理边框颜色的更改。

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

当我开始动画时，CSS边框会将文本向下移动

1 个答案: