Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Choose your favorites
Discord
Framer
Sketch
Instagram
Dribbble
Spotify
Figma
Slack
css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); *, *:after, *:before { box-sizing: border-box; } body { font-family: "Inter", sans-serif; line-height: 1.5; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #1d1f20; } .checkbox-group { display: flex; flex-wrap: wrap; justify-content: center; width: 90%; margin-left: auto; margin-right: auto; max-width: 600px; } .checkbox-group > * { margin: 0.5rem 0.5rem; } .checkbox-group-legend { font-size: 1.5rem; font-weight: 700; color: #9c9c9c; text-align: center; line-height: 1.125; margin-bottom: 1.25rem; } .checkbox-input { clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .checkbox-input:checked + .checkbox-tile { border-color: #2260ff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); color: #2260ff; } .checkbox-input:checked + .checkbox-tile:before { transform: scale(1); opacity: 1; background-color: #2260ff; border-color: #2260ff; } .checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label { color: #2260ff; } .checkbox-input:focus + .checkbox-tile { border-color: #2260ff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; } .checkbox-input:focus + .checkbox-tile:before { transform: scale(1); opacity: 1; } .checkbox-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7rem; min-height: 7rem; border-radius: 0.5rem; border: 2px solid #b5bfd9; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.15s ease; cursor: pointer; position: relative; } .checkbox-tile:before { content: ""; position: absolute; display: block; width: 1.25rem; height: 1.25rem; border: 2px solid #b5bfd9; background-color: #fff; border-radius: 50%; top: 0.25rem; left: 0.25rem; opacity: 0; transform: scale(0); transition: 0.25s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: 50% 50%; } .checkbox-tile:hover { border-color: #2260ff; } .checkbox-tile:hover:before { transform: scale(1); opacity: 1; } .checkbox-icon { transition: 0.375s ease; color: #494949; } .checkbox-icon svg { width: 3rem; height: 3rem; } .checkbox-label { color: #707070; transition: 0.375s ease; text-align: center; }
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号