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.016 3.016 0 0 0-3.015 3.015v6.03a3.016 3.016 0 0 0 3.015 3.014h23.832a3.016 3.016 0 0 0 3.015-3.014v-6.03zM401.405 141.157a3.016 3.016 0 0 0-3.015-3.015h-23.831a3.016 3.016 0 0 0-3.015 3.015v6.03a3.016 3.016 0 0 0 3.015 3.015h23.831a3.016 3.016 0 0 0 3.015-3.015v-6.03z"/>
<path d="M396.564 86.15a4.963 4.963 0 0 0-4.96-4.96h-9.92a4.962 4.962 0 0 0-4.96 4.96v72.519a4.962 4.962 0 0 0 4.96 4.96h9.92a4.963 4.963 0 0 0 4.96-4.96V86.15z"/>
</g>
</g>
<g id="leftarm">
<g id="arm" fill="#fff">
<path d="M298.127 364.4s-7.315 16.138-8.932 24.649c-1.822 9.589-2.729 26.84-1.999 32.882.264 2.187 4.01 3.523 6.382 3.37 2.371-.154 7.104-1.644 7.847-4.293 1.169-4.167-1.391-14.755-.835-20.71.48-5.139 2.669-10.038 4.171-15.019 1.825-6.048 6.776-21.268 6.776-21.268l-13.41.389z"/>
<path d="M328.954 183.305c.327-1.944 2.171-3.312 4.116-3.054l7.047.936a3.419 3.419 0 0 1 2.932 3.99l-32.286 182.562c-.327 1.944-1.678 3.01-3.623 2.752l-5.936-.612a3.419 3.419 0 0 1-2.932-3.99l30.682-182.584z"/>
</g>
<g id="gear" fill="#fff">
<ellipse cx="338.846" cy="175.733" rx="28.773" ry="27.462"/>
<path d="M337.57 144.891a2.282 2.282 0 0 1 2.471-1.979l8.695.852a2.143 2.143 0 0 1 1.927 2.409l-.543 4.387a2.281 2.281 0 0 1-2.471 1.978l-8.695-.852a2.144 2.144 0 0 1-1.928-2.409l.544-4.386zM359.988 152.071c1.035-.798 2.612-.69 3.518.24l5.743 5.892c.906.93.801 2.332-.235 3.13l-3.752 2.89c-1.036.797-2.612.69-3.518-.24l-5.743-5.893c-.906-.929-.801-2.332.234-3.129l3.753-2.89zM313.352 153.743c-.742-1.024-.46-2.362.631-2.988l7.116-4.082c1.09-.625 2.579-.302 3.322.721l2.692 3.708c.742 1.024.46 2.363-.631 2.988l-7.116 4.082c-1.09.626-2.579.303-3.322-.721l-2.692-3.708zM303.944 175.743a2.307 2.307 0 0 1-1.745-2.905l1.852-6.619c.367-1.309 1.744-2.133 3.073-1.839l4.818 1.065a2.307 2.307 0 0 1 1.745 2.905l-1.852 6.619c-.366 1.309-1.743 2.134-3.073 1.84l-4.818-1.066zM316.309 198.017c-1.129.689-2.699.404-3.503-.637l-4.544-5.88c-.804-1.041-.54-2.446.589-3.135l4.092-2.499c1.13-.69 2.7-.404 3.504.636l4.544 5.881c.804 1.041.54 2.445-.59 3.135l-4.092 2.499z"/>
</g>
</g>
<g id="rightarm">
<g id="arm1" serif:id="arm" fill="#fff">
<path d="M473.562 365.471s7.315 16.138 8.932 24.65c1.821 9.588 2.729 26.839 1.998 32.881-.264 2.187-4.01 3.524-6.381 3.37-2.372-.154-7.105-1.644-7.848-4.293-1.168-4.167 1.391-14.755.835-20.709-.48-5.14-2.668-10.039-4.171-15.02-1.824-6.048-6.776-21.268-6.776-21.268l13.411.389z"/>
<path d="M442.568 183.545c-.326-1.938-2.169-3.302-4.114-3.044l-7.048.936a3.413 3.413 0 0 0-2.933 3.98l32.195 182.022c.326 1.938 1.677 3.001 3.622 2.742l5.936-.612a3.415 3.415 0 0 0 2..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0