Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Click the Icon
css
*, *:before, *:after { box-sizing: border-box; } body { background: #158fef; padding: 40px; } h4 { font-family: arial,helvetica,serif; color: #fff; font-size: 18px; text-align: center; margin: 40px 0 0; } .hamburglar { -webkit-transform: scale(1); transform: scale(1); margin: 40px auto; position: relative; display: block; width: 68px; height: 68px; background: #158fef; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .path-burger { position: absolute; top: 0; left: 0; height: 68px; width: 68px; -webkit-mask: url(#mask); mask: url(#mask); -webkit-mask-box-image: url(https://raygun.io/upload/mask.svg); } .animate-path { position: absolute; top: 0; left: 0; width: 68px; height: 68px; } .path-rotation { height: 34px; width: 34px; margin: 34px 34px 0 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .path-rotation:before { content: ''; display: block; width: 30px; height: 34px; margin: 0 4px 0 0; background: #fff; } @-webkit-keyframes rotate-out { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-out { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate-in { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotate-in { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .hamburglar.is-open .path { -webkit-animation: dash-in 0.6s linear normal; animation: dash-in 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-open .animate-path { -webkit-animation: rotate-in 0.6s linear normal; animation: rotate-in 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-closed .path { -webkit-animation: dash-out 0.6s linear normal; animation: dash-out 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-closed .animate-path { -webkit-animation: rotate-out 0.6s linear normal; animation: rotate-out 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .path { stroke-dasharray: 240; stroke-dashoffset: 240; stroke-linejoin: round; } @-webkit-keyframes dash-in { 0% { stroke-dashoffset: 240; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } } @keyframes dash-in { 0% { stroke-dashoffset: 240; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes dash-out { 0% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 240; } } @keyframes dash-out { 0% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 240; } } .burger-icon { position: absolute; padding: 20px 16px; height: 68px; width: 68px; } .burger-container { position: relative; height: 28px; width: 36px; } .burger-bun-top, .burger-bun-bot, .burger-filling { position: absolute; display: block; height: 4px; width: 36px; border-radius: 2px; background: #fff; } .burger-bun-top { top: 0; -webkit-transform-origin: 34px 2px; transform-origin: 34px 2px; } .burger-bun-bot { bottom: 0; -webkit-transform-origin: 34px 2px; transform-origin: 34px 2px; } .burger-filling { top: 12px; } .burger-ring { position: absolute; top: 0; left: 0; width: 68px; height: 68px; } .svg-ring { width: 68px; height: 68px; } .hamburglar.is-open .burger-bun-top { -webkit-animation: bun-top-out 0.6s linear normal; animation: bun-top-out 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-open .burger-bun-bot { -webkit-animation: bun-bot-out 0.6s linear normal; animation: bun-bot-out 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-closed .burger-bun-top { -webkit-animation: bun-top-in 0.6s linear normal; animation: bun-top-in 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-closed .burger-bun-bot { -webkit-animation: bun-bot-in 0.6s linear normal; animation: bun-bot-in 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes bun-top-out { 0% { left: 0; top: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { left: 0; top: 0; -webkit-transform: rotate(15deg); transform: rotate(15deg); } 80% { left: -5px; top: 0; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { left: -5px; top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @keyframes bun-top-out { 0% { left: 0; top: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { left: 0; top: 0; -webkit-transform: rotate(15deg); transform: rotate(15deg); } 80% { left: -5px; top: 0; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { left: -5px; top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @-webkit-keyframes bun-bot-out { 0% { left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { left: 0; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 80% { left: -5px; -webkit-transform: rotate(60deg); transform: rotate(60deg); } 100% { left: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } @keyframes bun-bot-out { 0% { left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { left: 0; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 80% { left: -5px; -webkit-transform: rotate(60deg); transform: rotate(60deg); } 100% { left: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } @-webkit-keyframes bun-top-in { 0% { left: -5px; bot: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 20% { left: -5px; bot: 0; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 80% { left: 0; bot: 0; -webkit-transform: rotate(15deg); transform: rotate(15deg); } 100% { left: 0; bot: 1px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes bun-top-in { 0% { left: -5px; bot: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 20% { left: -5px; bot: 0; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 80% { left: 0; bot: 0; -webkit-transform: rotate(15deg); transform: rotate(15deg); } 100% { left: 0; bot: 1px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes bun-bot-in { 0% { left: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 20% { left: -5px; bot: 0; -webkit-transform: rotate(60deg); transform: rotate(60deg); } 80% { left: 0; bot: 0; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 100% { left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes bun-bot-in { 0% { left: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 20% { left: -5px; bot: 0; -webkit-transform: rotate(60deg); transform: rotate(60deg); } 80% { left: 0; bot: 0; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 100% { left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .hamburglar.is-open .burger-filling { -webkit-animation: burger-fill-out 0.6s linear normal; animation: burger-fill-out 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hamburglar.is-closed .burger-filling { -webkit-animation: burger-fill-in 0.6s linear normal; animation: burger-fill-in 0.6s linear normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes burger-fill-in { 0% { width: 0; left: 36px; } 40% { width: 0; left: 40px; } 80% { width: 36px; left: -6px; } 100% { width: 36px; left: 0px; } } @keyframes burger-fill-in { 0% { width: 0; left: 36px; } 40% { width: 0; left: 40px; } 80% { width: 36px; left: -6px; } 100% { width: 36px; left: 0px; } } @-webkit-keyframes burger-fill-out { 0% { width: 36px; left: 0px; } 20% { width: 42px; left: -6px; } 40% { width: 0; left: 40px; } 100% { width: 0; left: 36px; } } @keyframes burger-fill-out { 0% { width: 36px; left: 0px; } 20% { width: 42px; left: -6px; } 40% { width: 0; left: 40px; } 100% { width: 0; left: 36px; } }
JavaScript
$('document').ready(function () { var trigger = $('#hamburger'), isClosed = true; trigger.click(function () { burgerTime(); }); function burgerTime() { if (isClosed == true) { trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG CSS3按钮菜单/汉堡-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号