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.933-3.98l-30.591-182.044z"/>
</g>
<g id="gear1" serif:id="gear" fill="#fff">
<ellipse cx="432.666" cy="178.728" rx="28.773" ry="27.462"/>
<path d="M433.942 147.885a2.28 2.28 0 0 0-2.471-1.978l-8.695.852a2.143 2.143 0 0 0-1.927 2.409l.543 4.387a2.281 2.281 0 0 0 2.471 1.978l8.696-.852a2.144 2.144 0 0 0 1.927-2.409l-.544-4.387zM411.524 155.066c-1.035-.798-2.612-.69-3.518.239l-5.743 5.893c-.906.93-.801 2.332.235 3.129l3.753 2.89c1.035.798 2.611.69 3.518-.239l5.742-5.893c.906-.93.801-2.332-.234-3.129l-3.753-2.89zM458.16 156.738c.743-1.024.46-2.363-.63-2.988l-7.117-4.082c-1.09-.625-2.579-.303-3.322.721l-2.692 3.708c-.742 1.024-.46 2.362.631 2.988l7.116 4.082c1.09.625 2.579.302 3.322-.721l2.692-3.708zM467.631 177.953a2.32 2.32 0 0 0 1.802-2.881l-1.715-6.637c-.341-1.318-1.701-2.166-3.036-1.894l-4.839.988a2.32 2.32 0 0 0-1.803 2.882l1.716 6.637c.34 1.318 1.701 2.166 3.036 1.894l4.839-.989zM455.203 201.012c1.129.689 2.699.404 3.503-.637l4.544-5.88c.804-1.041.541-2.446-.589-3.135l-4.092-2.499c-1.13-.69-2.699-.405-3.504.636l-4.543 5.881c-.805 1.04-.541 2.445.589 3.135l4.092 2.499z"/>
</g>
</g>
<path d="M400.684 163.262a3.016 3.016 0 0 0-3.015-3.015h-23.832a3.016 3.016 0 0 0-3.014 3.015v6.029a3.016 3.016 0 0 0 3.014 3.015h23.832a3.016 3.016 0 0 0 3.015-3.015v-6.029z" fill="#fff"/>
<path d="M432.898 245.689c0-11.529-19.307-27.187-32.277-27.187l-28.552-.174c-13.672-1.338-32.586 17.465-31.947 30.211l-1.61 137.497c-3.907 15.675 6.945 24.694 23.5 20.89l46.741 1.161c17.343 2.582 27.785-7.415 23.759-22.051l.386-140.347z" fill="#001142"/>
<path d="M419.26 271.238c0-3.91 1.161-11.781-1.629-14.429-3.04-2.885-10.234-1.167-15.029-1.167l-33.104-.146c-4.121 0-12.203-1.144-15.113 1.063-3.581 2.717-1.755 10.17-1.755 14.679v99.572c0 3.83-.989 11.574 1.701 14.204 3.048 2.981 9.978 1.625 14.862 1.625l33.252-.139c4.979 0 12.813 1.259 15.866-1.823 2.586-2.609.949-10.12.949-13.867v-99.572z" fill="#b46681"/>
<g id="screw" fill="#fff">
<path d="M389.485 249.888s1.112 2.898 1.913 4.24c1.048 1.754 3.643 4.446 4.371 6.288.591 1.492.721 3.318 0 4.762-.852 1.707-4.329 4.067-5.115 5.481-.499.898-.07 2.091.404 3.001.88 1.688 4.046 5.292 4.872 7.127.538 1.196.694 2.713.085 3.881-.821 1.574-4.211 3.989-5.011 5.565-.598 1.178-.402 2.719.211 3.89.856 1.636 4.099 4.148 4.927 5.928.678 1.458.823 3.341.04 4.754-.85 1.532-4.226 3.039-5.14 4.441-.743 1.14-.92 2.752-.343 3.97.869 1.835 4.666 5.089 5.56 7.039.658 1.434.586 3.28-.193 4.661-.901 1.597-4.343 3.388-5.212 4.92-.716 1.262-.592 2.952 0 4.268.66 1.465 3.399 2.908 3.959 4.522.559 1.614.29 3.636-.601 5.161-1.072 1.837-5.177 3.76-5.832 5.856-.655 2.095 1.782 5.42 1.903 6.718.048.502-1.174 1.065-1.174 1.065s-2.348-.392-3.089-1.15c-1..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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