Question

我想为我的网页元素添加动画边框效果，并在codepen上找到此笔

HTML

<div>
  <h1>Hover over me!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

CSS

 @keyframes bg {
      0% {
        background-size:  0 3px, 3px 0, 0 3px, 3px 0;
      }
      25% {
        background-size:  100% 3px,  3px 0,  0 3px, 3px 0;
      }
      50% {
        background-size:   100% 3px,  3px 100%, 0 3px, 3px 0;
      }
      75% {
        background-size:  100% 3px, 3px 100%,  100% 3px, 3px 0;
      }
      100% {
        background-size:  100% 3px,  3px 100%, 100% 3px, 3px 100%;
      }
    }
    div {
      width: 25%;
      margin: 2rem auto;
      padding: 2rem;
      background-repeat: no-repeat;
      background-image:
        linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%),
        linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%),
        linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%),
        linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%);
      background-size: 
        100% 3px,
        3px 100%,
        100% 3px,
        3px 100%;
      background-position: 
        0 0,
        100% 0,
        100% 100%,
        0 100%;
      animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
      animation-play-state: paused;
    }

    div:hover {
      animation-play-state: running;
    }

这正是我需要的，但它不适用于IE。试图调整代码，但无法使其工作。非常感谢你的帮助。感谢。

Answer 1

我用Edge打开你的codepen它工作正常我相信:) （IE确实有问题，它已加载边框已经绘制）

动画边框效果无法在IE上运行

1 个答案: