Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body, html { width: 100vw; height: 100vh;overflow: hidden } body { background-image: linear-gradient(135deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 80%)); display: flex; align-items: center; justify-content: center; --hue: 220deg; --width: 23rem; --accent-hue: 22deg; --duration: 0.6s; --easing: cubic-bezier(1, 0, 1, 1); } input { display: none; } .switch { --shadow-offset: calc(var(--width) / 20); position: relative; cursor: pointer; display: flex; align-items: center; width: var(--width); height: calc(var(--width) / 2.5); border-radius: var(--width); box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%), inset -10px -10px 10px hsl(var(--hue) 20% 93%); } .indicator { content: ''; position: absolute; width: 40%; height: 60%; transition: all var(--duration) var(--easing); box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%), inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%), inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%); } .indicator.left { --hue: var(--accent-hue); overflow: hidden; left: 10%; border-radius: 100px 0 0 100px; background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%)); } .indicator.left::after { content: ''; position: absolute; opacity: 0.6; width: 100%; height: 100%; background: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nNTAwJyBoZWlnaHQ9JzUwMCc+CgogICAgPGZpbHRlciBpZD0nbm9pc2UnIHg9JzAnIHk9JzAnPgogICAgICA8ZmVUdXJidWxlbmNlCiAgICAgICAgdHlwZT0nZnJhY3RhbE5vaXNlJwogICAgICAgIGJhc2VGcmVxdWVuY3k9JzAuNjUnCiAgICAgICAgbnVtT2N0YXZlcz0nMycKICAgICAgICBzdGl0Y2hUaWxlcz0nc3RpdGNoJwogICAgICAvPgogICAgICA8ZmVCbGVuZCBtb2RlPSJzY3JlZW4iLz4KICAgIDwvZmlsdGVyPgoKICAgIDxyZWN0IHdpZHRoPSc1MDAnIGhlaWdodD0nNTAwJyBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PScwLjUnLz4KPC9zdmc+"); } .indicator.right { right: 10%; border-radius: 0 100px 100px 0; background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%)); } .button { position: absolute; z-index: 1; width: 55%; height: 80%; left: 5%; border-radius: 100px; background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%); transition: all var(--duration) var(--easing); box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%), 2px 2px 6px hsl(var(--hue) 18% 50% / 40%), 10px 20px 10px hsl(var(--hue) 18% 50% / 40%), 20px 30px 30px hsl(var(--hue) 18% 50% / 60%); } .button::before, .button::after { content: ''; position: absolute; top: 10%; width: 41%; height: 80%; border-radius: 100%; } .button::before { left: 5%; box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%); background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%); } .button::after { right: 5%; box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%); background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%); } input:checked ~ .button { left: 40%; } input:not(:checked) ~ .indicator.left, input:checked ~ .indicator.right { box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%), inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%), inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%); }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D 橙色开关(纯 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号