纯CSS图片边框动画特效

这是一款纯css制作的图片边框动画特效。该特效为每张图片制作了一个矩形边框，当鼠标滑过图片时，矩形边框会运动到于图片重合的位置，非常炫酷。

使用方法

HTML代码

<div class="container">
        <img src="img/1.jpg" >
        <img src="img/2.jpg" style="--color:#4ECDC4">
        <img src="img/3.jpg" style="--color:#FF6B6B">
</div>
		

CSS代码

.container {
  background: #e8e9ba;
  display: grid;
  gap: 40px;
  height: 100vh;
  margin: 0;
  grid-auto-flow: column;
  place-content: center;
}

img {
  --color: #8A9B0F; /* the border color */
  --border: 10px;   /* the border thickness*/
  --offset: 20px;   /* control the offset*/
  --gap: 5px;       /* the gap on hover */
  
  --_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)),var(--color) 0;
  --_o: calc(3*var(--offset));
  padding: 
    calc(var(--gap) + var(--border))
    calc(var(--gap) + var(--border) + var(--offset))
    calc(var(--gap) + var(--border) + var(--offset))
    calc(var(--gap) + var(--border));
  background: 
    linear-gradient(      var(--_c)) var(--_o) var(--_o), 
    linear-gradient(90deg,var(--_c)) var(--_o) var(--_o);
  background-size: calc(100% - var(--_o)) calc(100% - var(--_o));
  background-repeat: no-repeat;
  filter: grayscale(.4);
  transition: .5s;
  cursor: pointer;
}
img:hover {
  background-position: 0px 0px;
  background-size: calc(100% - var(--offset)) calc(100% - var(--offset));
  filter: grayscale(0);
}


		

codepen网址：https://codepen.io/t_afif/pen/eYeqvMe