Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Dark Mode
css
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --dur: 0.3s; font-size: calc(40px + (80 - 40)*(100vw - 320px)/(2560 - 320)); } body, input { color: hsl(0,0%,10%); font: 1em/1.5 sans-serif; } form, .toggle:before, .toggle:after { background: hsl(0,0%,90%); } form, .toggle { position: relative; } form { display: flex; justify-content: center; align-items: center; height: 100vh; } .curtain, .sr, .toggle:before, .toggle:after { position: absolute; } .curtain, .toggle:before, .toggle:after { transition: transform var(--dur); } .curtain, .toggle:before, .toggle:checked:after { transition-timing-function: ease-out; } .curtain, .sr { top: 0; left: 0; } .curtain { background: hsl(0,0%,100%); mix-blend-mode: difference; pointer-events: none; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; } .sr, .toggle { overflow: hidden; } .sr { clip: rect(1px,1px,1px,1px); color: transparent; width: 1px; height: 1px; } .toggle { background: currentColor; border-radius: 0.75em; cursor: pointer; width: 3em; height: 1.5em; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .toggle:before, .toggle:after { border-radius: 50%; content: ""; display: block; top: 0.25em; left: 0.25em; width: 1em; height: 1em; } .toggle:before, .toggle:checked:after { transition-delay: 0s; } .toggle:checked:before, .toggle:after { transition-delay: calc(var(--dur) * 0.75); transition-timing-function: cubic-bezier(0.3,1.6,0.5,0.7); } .toggle:before { transform: translateX(-1.5em); } .toggle:checked:before { transform: translateX(1.5em); } .toggle:checked:after { transform: translateX(3em); } .toggle:checked ~ .curtain { transform: scaleX(1); } .toggle:focus { outline: transparent; }
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号