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

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

代码语言：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,5.........完整代码请登录后点击上方下载按钮下载查看