css实现图片悬浮边框位移动画效果代码-html代码-BFW代码库

css实现图片悬浮边框位移动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现图片悬浮边框位移动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        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;
.........完整代码请登录后点击上方下载按钮下载查看