TweenMax+svg实现胶囊打开粉末倒出动画效果代码-html代码-BFW代码库

TweenMax+svg实现胶囊打开粉末倒出动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现胶囊打开粉末倒出动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Oswald);
    
    body{background-color:#444; overflow:hidden;}
    
    svg{ position:absolute; }
    
    #container{
      width:300px; height:300px;
      position:absolute;
      left:50%; top:40%;
      transform:translate(-50% , -50%);
    }
    .dot{
      border-radius:50%;
      position:absolute;
      height:12px; width:12px;
      
    }
    
    #www{
      font-family:'Oswald',tahoma;
      font-size:80px;
      color:#fff;
      position:absolute;
      left:50%; bottom:-40px;
      transform:translate(-50% , 0%);
    }
    
    
    #www::before{
      content:'';
      width:160px; height:12px;
      border-radius:50%;
      position:absolute;
      left:50%; top:89px;
      transform:translate(-50% , 0%);
      background-color:#333;
      z-index:-1;
    }
    
    
    
    #DiacoDesignLink,#pens{
      color: #fff;
    }
    </style>

</head>

<body>

    <div id='container'>
        <div id="www">bfw.wiki</div>

        <svg id='svgBack' xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
   <g class='Capsule CG'>
      <ellipse fill="#222" cx="147.806" cy="107.935" rx="6.944" ry="46.726"/>
  <path fill="#00A072" d="M224.964 61.184h-77.16c4.434 6.882 5.518 22.14 5.518 39.87v13.738c0 17.73-1.085 32.987-5.517 39.87h77.16c25.812 0 46.738-20.927 46.738-46.74 0-25.813-20.925-46.738-46.74-46.738z"/>
  </g>
  </svg>


        <svg id='mySVG' xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">

  <g class='Capsule CG'>
  <ellipse fill="none" cx="147.806" cy="107.935" rx="6.944" ry="46.726"/>
  <path fill="#00A072" d="M224.964 61.184h-77.16c4.434 6.882 5.518 22.14 5.518 39.87v13.738c0 17.73-1.085 32.987-5.517 39.87h77.16c25.812 0 46.738-20.927 46.738-46.74 0-25.813-20.925-46.738-46.74-46.738z"/>
  <path opacity=".3" fill="#F1F2F2" d="M227.272 154.603c22.127-1.08 40.925-18.23 43.98-40.242-8.65 9.954-21.245 11.063-33.442 11.063-12.537 0-83.952-.717-84.875 0-.697 9.54.198 20.968-5.13 29.24 25.742-.002 53.758 1.19 79.467-.06.258-.013-.764.037 0 0z"/>
  <path opacity=".7" fill="#FFF" d="M222.35 66.955h-70.817c.717 1.97.89 4.195 1.468 6.64h74.644c10.58 0 20.386 3.295 28.........完整代码请登录后点击上方下载按钮下载查看