gsap实现万圣节从瓶中释放鬼怪动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap结合MorphSVGPlugin3实现万圣节点击确定按钮从瓶中释放鬼怪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet"> <style> body, html { background-color: #000; font-family: "Rubik", sans-serif; } p { text-align: center; text-transform: uppercase; font-size: 1em; color: #999; } #container { margin: auto; padding: 30px; width: 320px; } /* Button */ button { min-width: 120px; margin: 0px; background: #082640; border: none; border-radius: 10px 0px 0px 10px; padding: 10px 15px; font-size: 0.8em; font-weight: 400; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: #ccc; cursor: pointer; transition: 0.2s; } button:hover { background-color: #194973; } .buttons { text-align: center; margin: auto; } .buttons button:last-child { border-radius: 0px 10px 10px 0px; } /* Ghost */ #e1, #e2 { display: none; } .st0 { fill: #194973; } .st1 { fill: #082640; } .st2 { fill: #962e40; } .cork { fill: #266aa6; transition: 0.2s; } </style> </head> <body> <div id="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 234.7" style="enable-background:new 0 0 200 234.7;" xml:space="preserve"> <path class="st2" id="s1" d="M97.3,83.6c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2C99.5,84.6,98.5,83.6,97.3,83.6z" /> <path class="st2" id="s2" d="M97.3,83.6c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2C99.5,84.6,98.5,83.6,97.3,83.6z" /> <path class="st0" id="thecork" d="M113.7,85.4c0,1.1-0.9,2-2,2H88.3c-1.1,0-2-0.9-2-2v-8.2c0-1.1,0.9-2,2-2h23.4c1.1,0,2,0.9,2,2V85.4z" /> <path class="st1" d="M157.6,169.4c0-25.6-16.7-47.3-39.8-54.8c-1.1-5.5-1.9-11.1-2-16.7c2.8-0.8,4.8-3.4,4.8-6.4V88 c0-3.7-3-6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0