TweenMax实现svg粉色可爱泡泡滑竿表情拖动选择器效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：TweenMax实现svg粉色可爱泡泡滑竿表情拖动选择器效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          background-color:#2d2d2d;
          overflow: hidden;
          /* font-family: 'Fjalla One', sans-serif; */
          font-family: 'Passion One', sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;   
        }
        
        body,
        html {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          -webkit-tap-highlight-color: rgba(0,0,0,0); 
          text-align:center
        }
        
        
        svg{
          width:80%;
          height:80%;
          visibility:hidden;
        /*  overflow:visible; */
        }
        .shine, .iconContainer{
          pointer-events:none;
        }
        .dot{
          cursor:pointer;
        }
        
        .shine circle{
          stroke:#FFF;
        }
        
        .speechBubbleGroup text{
          text-anchor:middle;
          font-size:29px;
          
        }
        
        line{
          vector-effect:"non-scaling-stroke";
        }
        
        .hitArea, .dragContainer{
          -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
    </style>

</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" text-rendering="auto" preserveAspectRatio="xMidYMid meet">
<defs>
<circle class="dot" fill="#FF69B4" stroke="none" stroke-width="0" stroke-miterlimit="10" cx="0" cy="300"/>  
  <g class="textGroup">
    <text class='label'>HI</text>
  </g>
<filter id="goo" color-interpolation-filters="sRGB">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 31 -12" result="cm" />

      </filter> 
  <g class="speechBubbleGroup">
        <path class="speechBubbleStroke" fill="none"  stroke-width="14" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                M69.361,112.063l16.377,28.99l16.562-28.94c37.277-5.125,65.195-27.13,65.195-53.494C167.496,28.456,130.766,4,85.515,4
                C40.275,4,4,28.456,4,58.619c0,26.291,27.361,48.249,65.361,53.448V112.063z"/>
        <path class="speechBubbleFill"  d="M69.361,109.063l16.377,28.99l16.562-28.94
                c37.277-5.125,65.195-27.13,65.195-53.494C167.496,25.456,130.766,1,85.515,1C40.275,1,4,25.456,4,55.619
                c0,26.291,27.361,48.249,65.361,53.448V109.063z"/>
    <text class="iconLabel" x="85" y="67">WONDERFUL!</text>
  </g> 
<g class="popLines" fill="none" stroke="#FF69B4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
        

                <line  x1="107.923" y1="21.37" x2="116.935" y2="4"/>
        
                <line  x1="59.335" y1="24.909" x2="50.5" y2="8.057"/>
        
                <line  x1="21.789" y1="56.11" x2="4" y2="53.67"/>
        
                <line  x1="26.782" y1="98.86" x2="8.057" y2="108.34"/>
        
                <line  x1="65.885" y1="125.86" x2="56.43" y2="145.37"/>
        
                <line  x1="112.429" y1="121.342" x2="121.03" y2="142.564"/>
        
                <line  x1="147.535" y1="93.82" x2="168.155" y2="101.45"/>
        
                <line  x1="149.742" y1="49.01" x2="168.155" y2="42.56"/>
</g>  
<path id="happy" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22,8c1.1,0,2,1.3,2,3s-0.9,3-2,3s-2-1.3-2-3
        S20.9,8,22,8z M10,8c1.1,0,2,1.3,2,3s-0.9,3-2,3s-2-1.3-2-3S8.9,8,10,8z M16,28c-5.2,0-9.5-4.4-10-9.9c2.9,1.7,6.4,2.7,10,2.7
        s7.1-1,10-2.7C25.5,23.6,21.2,28,16,28L16,28z"/> 
<path id="cool" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M16,26c-1.5,0-2.9-0.3-4.2-0.9l1-1.7
        c1,0.4,2.1,0.7,3.2,0.7c2.9,0,5.5-1.6,6.9-3.9l1.7,1C22.8,24.1,19.6,26,16,26L16,26z M26,12c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2h-4
        c0,1.1-0.9,2-2,2H8c-1.1,0-2-0.9-2-2V9c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v1h4V9c0-0.6,0.5-1,1-1h6c0.5,0,1,0.4,1,1V12z"/>  
<path id="evil" d="M32,2c0-1.4-0.3-2.8-0.8-4c-1,2.4-3,4.3-5.5,5.3C23,1.2,19.7,0,16,0S9,1.2,6.3,3.3C3.8,2.3,1.9,0.4,0.8-2
        C0.3-0.8,0,0.6,0,2c0,2.3,0.8,4.4,2.1,6.1C0.8,10.4,0,13.1,0,16c0,8.8,7.2,16,16,16s16-7.2,16-16c0-2.9-0.8-5.6-2.1-7.9
        C31.2,6.4,32,4.3,32,2z M18,11.9c0.1-1.5,1.4-2.5,2.5-3C21.6,8.3,22.7,8,22.8,8c0.5-0.1,1.1,0.2,1.2,0.7s-0.2,1.1-0.7,1.2
        c-0.6,0.1-1.2,0.4-1.8,0.7C21.8,11,22,11.5,22,12c0,1.1-0.9,2-2,2s-2-0.9-2-2C18,12,18,11.9,18,11.9L18,11.9z M8,8.8
        C8.2,8.2,8.7,7.9,9.2,8c0,0,1.1,0.3,2.2,0.8c1.1,0.6,2.5,1.6,2.6,3c0,0,0,0.1,0,0.1c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-0.5,0.2-1,0.5-1.4
        C10,10.4,9.3,10.1,8.8,10C8.2,9.8,7.9,9.3,8,8.8L8,8.8z M16,26c-3.6,0-6.8-1.9-8.6-4.9l2.6-1.5c1.2,2,3.5,3.4,6,3.4s4.8-1.4,6-3.4
        l2.6,1.5C22.8,24.1,19.6,26,16,26z"/>  

<path id="confused" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22,8c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2
        S20.9,8,22,8z M10,8c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S8.9,8,10,8z M21.5,25.3c-2.6,0.9-5.5-0.4-6.4-3
        c-0.6-1.6-2.3-2.4-3.8-1.8c-1.4,0.5-2.2,2-1.9,3.5h-2c-0.3-2.3,1-4.5,3.2-5.3c2.6-0.9,5.5,0.4,6.4,3c0.6,1.6,2.3,2.4,3.8,1.8
        c1.4-0.5,2.2-2,1.9-3.5h2C25,22.3,23.7,24.5,21.5,25.3z"/>  
<.........完整代码请登录后点击上方下载按钮下载查看