在悬停时为 2 个侧边框设置动画

Question

我有一个带有右边框和底边框的元素，我试图在鼠标悬停时为其设置动画。我喜欢并看到的动画示例是从左到右和从上到下绘制边框线的地方，但是，所有这些示例都使用四个带有不能仅在两侧使用的框阴影的边框。是否可以只制作两个动画？这就是我的边框目前的样式：

HTML:

a {
    display: block;
}

img {
    border-width: 12px;
    border-style: solid;
    border-top-color: blue;
    border-right-color: blue;
    border-bottom-color: transparent;
    border-left-color: transparent;
    width: 320px;
    transition: all 0.5s ease;
}

<a href="#"><img src="https://placehold.it/280x170" /></a>

Answer 1

您可以在 ::before 和 ::after 伪元素的帮助下为如下代码片段设置动画边框。

a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 12px;
}
a::before, a::after {
    content: "";
    position: absolute;
    transition: all 0.5s ease;
    background: blue;
}
a::before {
    width: 100%;
    height: 12px;
    top: 0;
    left: 120%;
    transform: skewX(45deg);
}
a::after {
    width: 12px;
    height: 100%;    
    left: auto;
    right: 0;
    bottom: 120%;
    transform: skewY(45deg);
}
a:hover::before{
    left: 6px;
}
a:hover::after{
    bottom: 6px;
}
img {
    width: 320px;
    display: block;
}

<a href="#">
    <img src="https://placehold.it/280x170">
</a>

Answer 2

您可以使用伪元素的组合，例如 ::before 和 ::after，如下所示，@raeesh alam；或者看看你是否可以只使用 hover 效果。

a:hover {
    ...
}

Answer 3

一个简单的背景动画就可以做到：

img {
    padding: 12px;
    background:
      linear-gradient(45deg,transparent 9px,blue 0),
      linear-gradient(45deg,transparent 9px,blue 0);
    background-position:top right;
    background-repeat:no-repeat;
    background-size:0% 12px,12px 0%;
    width: 320px;
    transition: all 0.5s ease;
}
img:hover {
    background-size:100% 12px,12px 100%;

}

<img src="https://placehold.it/280x170" >

您可以使用 CSS 个变量进行优化：

img {
    --b:12px; /* border width */
    --c:blue; /* border color */
    
    --g:linear-gradient(45deg,transparent calc(var(--b)/1.41),var(--c) 0) no-repeat 100% 0;
    padding: var(--b);
    background:var(--g)/var(--t,0%) var(--b) ,var(--g)/var(--b) var(--t,0%);
    transition: all 0.5s ease;
}
img:hover {
    --t:100%;
}

<img src="https://placehold.it/230x170" >
<img src="https://placehold.it/100x170" style="--b:15px;--c:red;">
<img src="https://placehold.it/150x150" style="--b:25px;--c:green;">

在悬停时为 2 个侧边框设置动画

Animate 2 side borders on hover

html

css

css-transitions