TweenLite+svg实现按钮点击变形动画效果代码
代码语言:html
所属分类:表单美化
代码描述:TweenLite+svg实现按钮点击变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #ef5435; color: white; font-family: sans-serif; } .text-area { text-align: center; } a { color: white; cursor: pointer; } a:hover { stroke: #faccc3; } button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; -webkit-appearance: none; border: none; outline: none; stroke: white; cursor: pointer; transition: all 175ms ease-in-out; } button:hover { stroke: #faccc3; } svg { width: 100px; } #burger-bar-one { opacity: 1; stroke-dasharray: 412px 1500px; } #burger-bar-two { opacity: 1; stroke-dasharray: 412px 1500px; } #burger-bar-three { opacity: 1; } .path { fill: transparent; stroke-width: 67px; stroke: #000000; stroke-linecap: round; opacity: 0; stroke: inherit; } </style> </head> <body > <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <button onCLick="onToggle()"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="overflow: visible; enable-background:new 0 0 512 512;" xml:space="preserve"> <g> <path id="burger-bar-one" class="path-1 path" d="M50,116.7l404.2-0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0