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.056-11.974-9.986-5.329-9.254-.422-18.729 6.052-24.327 3.018-2.609 3.911-3.383 9.281-4.489 5.464-1.125 14.957-1.273 19.851-1.049z" fill="#b46681"/>
        <ellipse cx="399.341" cy="44.546" rx="3.311" ry="3.898" fill="#443f32"/>
        <path d="M376.169 52.445c.899.683 2.695 2.049 4.272 2.489 1.577.441 3.672.444 5.19.155 1.451-.275 3.397-1.104 3.916-1.883" fill="none" stroke="#262a00"/>
        <ellipse cx="365.997" cy="44.008" rx="3.228" ry="4.018" fill="#433e31"/>
        <path d="M400.71 23.383c0-1.525-1.393-2.763-3.109-2.763h-27.638c-1.716 0-3.109 1.238-3.109 2.763v5.528c0 1.525 1.678 2.635 3.109 2.764 5.124.46 22.514.46 27.638 0 1.431-.129 3.109-1.239 3.109-2.764v-5.528z" fill="#fff"/>
        <g id="neck" fill="#fff">
          <path d="M400.796 99.027a3.016 3.016 0 0 0-3.015-3.015h-23.832a3.016 3.016 0 0 0-3.015 3.015v6.029a3.016 3.016 0 0 0 3.015 3.015h23.832a3.016 3.016 0 0 0 3.015-3.015v-6.029zM401.101 120.092a3.016 3.016 0 0 0-3.015-3.015h-23.832a3.........完整代码请登录后点击上方下载按钮下载查看