css鼠标悬浮斑点遮罩图片显示动画效果代码-html代码-BFW代码库

css鼠标悬浮斑点遮罩图片显示动画效果代码

代码语言：html

所属分类：悬停

代码描述：css鼠标悬浮斑点遮罩图片显示动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        .svgblob {
           position: relative;
           overflow: hidden;
           max-width: 100%;
           width: fit-content;
           outline: 2px #bdbdbd solid;
           margin: 1rem auto 3rem;
           box-sizing: border-box;
           border: 3px #e8e8e8 solid;
        }
        
        .svgblob svg {
           position: absolute;
           width: 100%;  
           height: 100%;
           display: block;
           transform-origin: 50% 50%;
           transition: transform 1s 0s;
           overflow: hidden;
        }
        
        .svgblob rect {
           overflow: hidden;
        }
        
        .svgblob:hover svg {
            transition-duration: 2s;
            transform: scale(8);  
        }
        
        .svgblob path {
           animation: rotatepath 47s linear 0s infinite;
        }
        
        .svgblob img {
           position: relative;
           z-index: -1;
           width: 100%;
           height: 100%;
           display: block;
        }
        
        @keyframes rotatepath {
           0% { transform: translate(50%, 50%) scale(2.4) rotateZ(360deg); }
           100% { transform:  translate(50%, 50%) scale(2.4) rotateZ(0deg); }  
        }
        
        
        
        
        
        body {
           margin: 0;
           padding: 0;
           background: #e8e8e8;
        }
        
        h1 {
           font: 600 3rem 'Hachi Maru Pop';
           color: #9bc;
           text-align: center;
          .........完整代码请登录后点击上方下载按钮下载查看