TweenMax+svg实现可点击消失的漂浮泡泡效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现可点击消失的漂浮泡泡效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @import 'https://fonts.googleapis.com/css?family=Mouse+Memoirs';
HTML, BODY {
  width: 100vw;
  height: 100vh;
}

BODY {
  background-color: lightyellow;
  background: radial-gradient(lightyellow, gold, teal, indigo);
}

.hidden {
  display: none;
}

.marked {
  outline: 2px solid red;
  stroke: red;
  stroke-width: 2;
}

.svg {
  position: absolute;
  width: 250px;
  height: 250px;
  overflow: visible;
  mix-blend-mode: multiply;
}

.svg--defs {
  width: 0;
  height: 0;
}

.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  isolation: isolate;
}

.demo__title {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  font-family: "Mouse Memoirs", sans-serif;
  font-size: 4.9rem;
  color: #FFF;
  cursor: pointer;
}

.demo-title__splash {
  position: absolute;
  top: -75px;
  left: -40px;
  opacity: 0;
  pointer-events: none;
}

.demo__tip {
  display: block;
  font-size: 1rem;
  font-family: Trebuchet MS;
}

.bubble {
  cursor: pointer;
}

.bubble__splash {
  opacity: 0;
  pointer-events: none;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <!-- Bubbles made of SVG Gradients and SVG Masks just as experiment : ) 
-->

    <div class="demo">
        <div class="demo__content">

            <svg class="svg svg--defs">  
        
        <!-- Bubble transparency -->
        <radialGradient id="grad--bw"
                        fx="25%" fy="25%">
            <stop offset="0%" 
                  stop-color="black"/>  
            <stop offset="30%" 
                  stop-color="black" 
                  stop-opacity=".2"/>
            <stop offset="97%" 
                  stop-color="white" 
                  stop-opacity=".4"/>
            <stop offset="100%" 
                  stop-color="black"/>
        </radialGradient>
        
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <rect fill="url(#grad--bw)"
              width="1" height="1"></rect>
        </mask>
        
        <!-- Light spot -->
        <radialGradient id="grad--spot"
                        fx="50%" fy="20%">
            <stop offset="10%" 
                  stop-color="white"
                  stop-opacity=".7"/>  
            <stop offset="70%" 
                  stop-color="white"
                  stop-opacity="0"/>
        </radialGradient>
        
        <!-- Top & bottom light -->
        <radialGradient id="grad--bw-light"
                        _fx="25%" fy="10%">
            <stop offset="60%" 
                  stop-color="black" 
                  stop-opacity="0"/>
            <stop offset="90%" 
                  stop-color="white" 
                  stop-opacity=".25"/>
            <stop offset="100%" 
                  stop-color="black"/>
        </radialGradient>
        
        <mask id="mask--light-top" maskContentUnits="objectBoundingBox">
            <rect fill="url(#grad--bw-light)"
              width="1" height="1" transform="rotate(180, .5, .5)"></rect>
        </mask>
        
        <mask id="mask--light-bottom" maskContentUnits="objectBoundingBox">
            <rect fill="url(#grad--bw-light)"
              width="1" height="1"></rect>
        </mask>
        
        <!-- Colors of bubble -->
        <linearGradient id="grad"
              x1="0" y1="100%" x2="100%" y2="0">
            <stop offset="0%" stop-color="dodgerblue" 
                  class="stop-1"/>   
            <stop offset="50%" stop-color="fuchsia"
                  class="stop-2"/>
            <stop offset="100%" stop-color="yellow" 
                  class="stop-3"/>
        </linearGradient> 
        
        <mask id="mask--collapse" maskContentUnits="objectBoundingBox">
            <circle r=".5" cx=".5" cy=".5"
                    class="collapse-circle"
                    ></circle>
        </mask>
        
        <symbol id="splash">
            <g class="splash__group" 
               fill="none"
               stroke="white" stroke-opacity=".8">
                <circle r="49%" 
                    cx="50%" cy="50%"
                    stroke-width="3%"  
                    stroke-dasharray="1% 10%"  
                    class="splash__circle _hidden"
                    ></circle>
                <circle r="44%" 
                    cx="50%" cy="50%"
                    stroke-width="2%"
                    stroke-dasharray="1% 5%"                     class="splash__circle _hidden"
                    ></circle>
                <circle r="39%" 
                    cx="50%" cy="50%"
                    stroke-width="1%"  
                    stroke-dasharray="1% 8%"  
                    class="splash__circle _hidden"
                    ></circle>
                <circle r="33%" 
                    cx="50%" cy="50%"
                    stroke-width="3%"  
                    stroke-dasharray="1% 6%"  
                    class="splash__circle _hidden"
                    ></circle>
                <circle r="26%" 
                    cx="50%" cy="50%"
                    stroke-width="1%"  
                    stroke-dasharray="1% 7%"  
                    class="splash__circle _hidden"
                    ></circle>
                <circle r="18%" 
                    cx="50%" cy="50%"
                    stroke-width="1%"  
                    stroke-dasharray="1% 8%"  
                    class="splash__circle _hidden"
                    ></circle>
            </g>
        </symbol>
    </svg>

            <div class="demo__defs hidden">
                <svg class="svg bubble" viewBox="0 0 200 200">
            <g class="bubble__group">
              <ellipse rx="20%" ry="10%"
                   cx="150" cy="150"
                   fill="url(#grad--spot)"
                   transform="rotate(-225, 150, 150)"
                   class="shape _hidden"    
                   ></ellipse>     
              <circle r="50%" 
                    cx="50%" cy="50%"
                    fill="aqua"
                    mask="url(#mask--light-bottom)"
                    class="shape _hidden"
                    ></circle>
              <circle r="50%&qu.........完整代码请登录后点击上方下载按钮下载查看