Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Home
About
Products
Contact
css
body { align-items: center; background-color: #ffded5; display: flex; height: 100vh; justify-content: center; } .phone { background-color: #fff; border: 5px solid black; border-radius: 25px; box-shadow: 0 0.9px 2.2px rgba(0, 0, 0, 0.039), 0 2.2px 5.3px rgba(0, 0, 0, 0.048), 0 4.1px 10px rgba(0, 0, 0, 0.052), 0 7.4px 17.9px rgba(0, 0, 0, 0.057), 0 13.8px 33.4px rgba(0, 0, 0, 0.067), 0 33px 80px rgba(0, 0, 0, 0.11); height: 400px; overflow: hidden; position: relative; width: 220px; } .image { position: absolute; } .menu { align-items: center; background-color: #303235; clip-path: polygon(81.05% 9.1%, 92% 9.1%, 92% 10.1%, 81.05% 10.1%); color: #f2f2f2; display: flex; flex-direction: column; font-family: sans-serif; font-size: 28px; height: 100%; position: absolute; top: 0; transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 400ms cubic-bezier(0.4, 0, 0.2, 1); width: 100%; } .active .menu { background-color: #e07a8d; clip-path: polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%); } .options { align-items: center; display: flex; flex-direction: column; margin-top: 60px; transform: scale(0.8); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .option { cursor: pointer; margin: 8px 0; } .option.selected { color: #a02f56; } .active .options { transform: scale(1); } .x { pointer-events: none; position: absolute; top: 0; } .top-bars { stroke: #303235; transition: stroke 400ms cubic-bezier(0.4, 0, 0.2, 1); } .active .top-bars { stroke: #f2f2f2; } .bar { transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .bar1 { transform-origin: 190px 20.5px; } .bar2 { transform-origin: 190px 28.5px; } .active .bar1 { transform: translateY(8.6px) rotate(45deg); } .active .bar2 { transform: rotate(-45deg); } .menu-click-area { cursor: pointer; height: 40px; opacity: 0.3; position: absolute; right: 10px; top: 10px; width: 40px; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>汉堡包菜单+剪辑路径-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号