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

css实现鼠标悬浮图片边框动画效果代码

代码语言：html

所属分类：悬停

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

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

<html>

<head>
    <style>
        img {
          --b: 8px;  /* border thickness*/
          --s: 60px; /* size of the corner*/
          --g: 14px; /* the gap*/
          --c: #EDC951; 
          
          padding: calc(var(--b) + var(--g));
          background-image:
            conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
            conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
          background-position:
            var(--_p,0%) var(--_p,0%),
            calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
          background-size: var(--s) var(--s);
          background-repeat: no-repeat;
          cursor: pointer;
          transition: 
            background-position .3s var(--_i,.3s), 
            background-size .3s calc(.3s - var(--_i,.3s));
        }
        img.alt {
          background-image:
            conic-gradient(from 180deg at top    var(--b) right var(--b),#0000 25%,var(--c) 0),
            conic-gradient(from   0deg at bottom var(--b) left  var(--b),#0000 25%,var(--c) 0);
          .........完整代码请登录后点击上方下载按钮下载查看