css实现用户图像悬浮出现齿轮效果代码

代码语言:html

所属分类:悬停

代码描述:css实现用户图像悬浮出现齿轮效果代码

代码标签: css 用户 图像 悬浮 齿轮

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root {
          --transition: all .35s ease-in-out;
        }
        
        svg {
          fill: url(#avatar);
          stroke-width: 20px;
        }
        
        svg {
          filter: grayscale(1);
          transition: var(--transition);
        }
        
        circle {
          stroke: rgba(250, 162, 0, 0.5);
          stroke-dasharray: 0;
          transform: rotate(5deg);
          transform-origin: center;
          transition: var(--transition);
        }
        
        svg:hover {
          filter: grayscale(0);
        }
        
        svg:hover circle {
          stroke: #faa200;
          stroke-dasharray: 10 20;
          transform: rotate(0);
          transform-origin: center;
        }
        
        /* DEMO STYLES .........完整代码请登录后点击上方下载按钮下载查看

网友评论0