Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background-color: #21264B; overflow-x: hidden; } body .base { z-index: 90; position: fixed; top: 0px; left: 0px; background-color: #FFFFFF; width: 98px; height: 98px; -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1); transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1); border-bottom-right-radius: 100%; } body .base .menu { z-index: 100; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; border-bottom-right-radius: 200px; cursor: pointer; -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1), background-color 1s ease; transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1), background-color 1s ease; } body .base .menu .icon { position: absolute; width: 25px; height: 25px; top: 50%; left: 50%; -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } body .base .menu .icon:before, body .base .menu .icon:after { content: ''; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: top 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease; transition: top 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease; transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s; transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease; } body .base .menu .icon .bar, body .base .menu .icon:before, body .base .menu .icon:after { position: absolute; height: 5px; left: 0px; right: 0px; border-radius: 5px; background-color: #21264B; } body .base .menu .icon .bar { -webkit-transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s; transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s; opacity: 1; top: 10px; } body .base .menu .icon:before { top: 0px; } body .base .menu .icon:after { top: initial; top: 20px; } body .base .icons { z-index: 98; position: absolute; top: 0px; left: 0px; } body .base .icons > * { position: absolute; font-size: 40px; color: #21264B; -webkit-transition: 0.3s cubic-bezier(0.5, -0.25, 0.05, 1); transition: 0.3s cubic-bezier(0.5, -0.25, 0.05, 1); } body .base .icons .fa-user { top: 35px; left: 0px; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } body .base .icons .fa-calendar-o { top: 0px; left: 0px; color: #fff; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } body .base .icons .fa-tachometer { top: 0px; left: 35px; } body .base .section { z-index: 96; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(135deg); transform: rotate(135deg); } body .base .section .cover1 { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } body .base .section .cover1, body .base .section .cover1 .cover2, body .base .section .cover1 .cover2 .content { position: absolute; width: 600px; height: 600px; } body .base .section .cover1, body .base .section .cover1 .cover2 { top: 50%; left: 50%; -webkit-transform: translate(-100%, -100%) rotate(4deg); transform: translate(-100%, -100%) rotate(4deg); overflow: hidden; pointer-events: none; -webkit-transition: -webkit-transform 0.5s ease-in; transition: -webkit-transform 0.5s ease-in; transition: transform 0.5s ease-in; transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; } body .base .section .cover1 .cover2 { -webkit-transform: translate(50%, -50%) rotate(-8deg); transform: translate(50%, -50%) rotate(-8deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } body .base .section .cover1 .cover2 .content { width: 150px; height: 150px; border-radius: 100%; background-color: #EE1B59; top: 100%; left: 0%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background-color 0s, width 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s; transition: background-color 0s, width 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s; pointer-events: auto; } body .base .section-static { z-index: 94; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transition: width 1s cubic-bezier(0.5, -0.75, 0.05, 1), height 1s cubic-bezier(0.5, -0.75, 0.05, 1); transition: width 1s cubic-bezier(0.5, -0.75, 0.05, 1), height 1s cubic-bezier(0.5, -0.75, 0.05, 1); } body .base .section-static:hover { background-color: #EAEAEA; } body .base .section-static.top { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-bottom-right-radius: 400px; } body .base .section-static.bottom { -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom-right-radius: 400px; } body .base.close { width: 300px; height: 300px; -webkit-transition: all 1.25s cubic-bezier(0.5, 0, 0.05, 8); transition: all 1.25s cubic-bezier(0.5, 0, 0.05, 8); } body .base.close .menu { width: 150px; height: 150px; -webkit-transition: all 1s cubic-bezier(0.5, 0, 0.05, 1.75), background-color 1s ease; transition: all 1s cubic-bezier(0.5, 0, 0.05, 1.75), background-color 1s ease; background-color: #21264B; } body .base.close .menu .icon .bar, body .base.close .menu .icon:before, body .base.close .menu .icon:after { background-color: #FFFFFF; } body .base.close .menu .icon .bar { opacity: 0; } body .base.close .menu .icon:before, body .base.close .menu .icon:after { -webkit-transition: top 0.5s linear, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s; transition: top 0.5s linear, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s; transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s; transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s; } body .base.close .menu .icon:before { top: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } body .base.close .menu .icon:after { top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body .base.close .icons { position: absolute; top: 0px; left: 0px; } body .base.close .icons > * { position: absolute; font-size: 40px; color: #21264B; -webkit-transition: 0.3s cubic-bezier(0.5, 0, 0.05, 1.75) 0.7s; transition: 0.3s cubic-bezier(0.5, 0, 0.05, 1.75) 0.7s; pointer-events: none; } body .base.close .icons .fa-user { top: 35px; left: 200px; } body .base.close .icons .fa-calendar-o { top: 141px; left: 141px; color: #fff; -webkit-transition-delay: 0.65s; transition-delay: 0.65s; } body .base.close .icons .fa-tachometer { top: 200px; left: 35px; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } body .base.close .section .cover1 { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } body .base.close .section .cover1, body .base.close .section .cover1 .cover2, body .base.close .section .cover1 .cover2 .content { position: absolute; width: 600px; height: 600px; } body .base.close .section .cover1, body .base.close .section .cover1 .cover2 { top: 50%; left: 50%; -webkit-transform: translate(-100%, -100%) rotate(16deg); transform: translate(-100%, -100%) rotate(16deg); overflow: hidden; -webkit-transition: -webkit-transform 0.5s ease-in 0.5s; transition: -webkit-transform 0.5s ease-in 0.5s; transition: transform 0.5s ease-in 0.5s; transition: transform 0.5s ease-in 0.5s, -webkit-transform 0.5s ease-in 0.5s; } body .base.close .section .cover1 .cover2 { -webkit-transform: translate(50%, -50%) rotate(-32deg); transform: translate(50%, -50%) rotate(-32deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } body .base.close .section .cover1 .cover2 .content { border-radius: 100%; background-color: #EE1B59; top: 100%; left: 0%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background-color 0s, width 1.1s cubic-bezier(0.5, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.5, 0, 0.05, 2) 0.25s; transition: background-color 0s, width 1.1s cubic-bezier(0.5, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.5, 0, 0.05, 2) 0.25s; } body .base.close .section .cover1 .cover2 .content:hover { background-color: #DD1350; } body .base.close .section-static { width: 300px; height: 300px; -webkit-transition: width 1.25s cubic-bezier(0.5, 0, 0.05, 2), height 1.25s cubic-bezier(0.5, 0, 0.05, 2); transition: width 1.25s cubic-bezier(0.5, 0, 0.05, 2), height 1.25s cubic-bezier(0.5, 0, 0.05, 2); }
JavaScript
$(".menu").click(function(){ $(this).parent().toggleClass("close"); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Css环型菜单-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号