CSS: 动画偏移图像边框

Question

所以，我正在尝试使用 css

实现这种动画边框

sample of the border

示例动画 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: 2em;
    
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to bottom, #f5ca00 100%, #f5ca00 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;
}

<div>         
    <img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
        </div>

我只希望最后一条动画线像开头的示例一样是一半并在图像内部:)

请注意，它将在 wordpress 中使用。感谢任何形式的帮助或指导。

Answer 1

尝试使用 :after pseudo class 添加到 div 样式，并在悬停或初始化动画时对其进行动画处理。

@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: 2em;
    
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
                        linear-gradient(to bottom, #f5ca00 100%, #f5ca00 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;
    position: relative;
}

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

div:after{
  content: '';
  width: 2px;
  height: 0;
  background: #f5ca00;
  position: absolute;
  right: 0;
  top: 0;
  transition: height .3s ease;
}
div:hover:after {
    height: 100px;
}

<div>         
    <img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
        </div>

CSS: 动画偏移图像边框

CSS: animated offset image border

css

wordpress

animation

border