前端例程20220815：拟物风格复选按钮
Posted Naisu Xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程20220815：拟物风格复选按钮相关的知识，希望对你有一定的参考价值。
演示
原理
本文要实现的按钮大致示意如下：
观察者从正上方观看，写代码时主要处理光照以及近大远小等现象。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>拟物风格复选按钮</title>
<style>
*
padding: 0;
margin: 0;
user-select: none;
html,
body
height: 100vh;
</style>
<style>
body
display: flex;
background-color: #181818;
align-items: center;
justify-content: center;
/* 按钮区域 */
.chk
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
/* 隐藏默认checkbox */
.chk>input
appearance: none;
/* 按钮本身 */
.chk>span
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #222222;
box-shadow: 0 2px 8px rgba(0, 0, 0, 1),
inset 0 -2px 4px rgba(0, 0, 0, 1),
inset 0 2px 4px rgba(255, 255, 255, 0.5);
transition: 0.2s;
/* 按钮按下后因高度下降造成的缩放 */
.chk>input:checked~span
box-shadow: 0 1px 4px rgba(0, 0, 0, 1),
inset 0 -1px 2px rgba(0, 0, 0, 1),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
transform: scale(0.95);
transition: 0.2s;
/* 按钮中间图形 */
.chk>svg
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
stroke: #111111;
stroke-width: 6px;
stroke-linecap: round;
transition: 0.2s;
transition-delay: 0.1s;
/* 按钮按下后中间图形点亮 */
.chk>input:checked~svg
stroke: #00ffff;
filter: drop-shadow(0 0 12px #00ffff);
transform: scale(0.95);
transition: 0.2s;
transition-delay: 0.1s;
</style>
</head>
<body>
<!-- 使用label包裹，可以使内部所有元素和checkbox联动 -->
<label class="chk">
<input type="checkbox">
<span></span>
<svg id="btn-more" viewBox="0 0 100 100">
<line x1="50" y1="25" x2="50" y2="50" />
<circle cx="8" cy="70" r="20" fill="none" stroke-dasharray="90" transform="rotate(-39)" />
</svg>
</label>
</body>
</html>
以上是关于前端例程20220815：拟物风格复选按钮的主要内容，如果未能解决你的问题，请参考以下文章
WordPress图片主题 国人原创轻拟物风格niRvana主题
前端例程 003：玻璃拟物化风格（Glassmorphism）设计与实现