gsap实现葡萄酒红酒开瓶动画效果代码-html代码-BFW代码库

gsap实现葡萄酒红酒开瓶动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现葡萄酒红酒开瓶动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  max-width: 800px;
  margin: 0 auto;
  background: #F3A99C;
}

.frame {
  margin: 0 auto;
  background: #b46681;
  border-radius: 25% 25% 5px 5px;
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

.opener {
  height: 700px;
  max-width: 800px;
  width: 100%;
}

.bubble, .bubble2, .bubble3 {
  opacity: 0;
}
</style>



</head>

<body translate="no" >
  <div class="frame"> <svg class="opener" viewBox="0 0 776 433" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <g id="bubbly">
    <g id="wine">
      <g id="head">
        <path d="M386.346.182c7.009.377 23.405.217 31.009 1.714 6.937 1.365 5.693 1.044 12.025 5.584 12.727 9.125 17.139 32.357 4.194 50.117-4.94 7.262-8.52 13.411-18.987 19.953-8.733 5.459-20.375 8.879-29.207 12.918-13.835-4.378-28.307-9.988-38.068-17.726-6.682-5.297-10.647-9.784-14.214-15.291-11.651-17.982-9.124-34.379 2.218-45.886 5.286-5.363 6.85-6.954 16.258-9.227 9.57-2.312 26.2-2.616 34.772-2.156z" fill="#fff"/>
        <path d="M386.726 23.582c4.001.183 13.36.106 17.701.834 3.96.664 3.25.508 6.865 2.717 7.266 4.439 12.421 16.252 6.671 25.827-2.465 4.104-3.689 7.419-10.698 10.768-4.322 2.066-15.128 6.36-21.437 5.845-4.028-.328-11.124-.362-15.806-2.539-2.946-1.371-4.829-2.305-6.506-3.601-3.634-2.811-10.286-7.0.........完整代码请登录后点击上方下载按钮下载查看