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;
           margin-bottom: 4rem;
        }
        
        h1 span {
           display: block;
           font-size: 165%;
        }
    </style>



</head>

<body>
    <h1><span>CSS/SVG</span> animated Blobs</h1>

    <div class="svgblob">
        <svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
      <linearGradient id="blobgradient-1" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="#e8e8e8"></stop>
        <stop offset="100%" stop-color="#e8e8e8"></stop>
      </linearGradient>
    </defs>

    <mask id="blobmask-1">
      <rect x="0" y="0" fill="#fff" width="500" height="500"></rect>
      <path fill="#000">

        <animate attributeName="d" begin="-6s" dur="15s" 
                 repeatCount="indefinite" values="

M42.4,-69.5C54.5,-66.4,63.6,-54.2,59.1,-41.1C54.6,-28,36.6,-14,38.4,1C40.2,16.1,61.9,32.2,67,46.3C72,60.4,60.5,72.6,46.6,69.5C32.6,66.4,16.3,48,3.4,42.1C-9.5,36.1,-19,42.7,-32.2,45.4C-45.4,48.1,-62.4,47,-67.3,38.8C-72.2,30.6,-64.9,15.3,-61,2.3C-57.1,-10.8,-56.5,-21.5,-54.9,-35.4C-53.3,-49.3,-50.7,-66.3,-41.4,-70.9C-32,-75.5,-16,-67.9,-0.4,-67.1C15.1,-66.3,30.3,-72.5,42.4,-69.5Z;
         M33.1,-67.4C35.6,-55.9,25.3,-32.3,24,-19C22.8,-5.8,30.6,-2.9,37.2,3.8C43.8,10.5,49.3,21.1,47.1,28.4C44..........完整代码请登录后点击上方下载按钮下载查看