CSS 實戰: Switch 按鈕開關(checkbox 實現)

文章目錄

• CSS 實戰: Switch 按鈕開關(checkbox 實現)
• 正文
• • 1. 效果
  • 2. 代碼實現
  • • 2.1 html 結構
    • 2.2 外框 wrapper + 底座 box 樣式
    • 2.3 白色按鈕 but
    • 2.4 表情符號
• 其他資源
• • 參考連接
  • 完整代碼示例

正文

1. 效果

2. 代碼實現

2.1 html 結構

<label class="box-wrapper"><input type="checkbox" /><div class="box"><div class="but"></div></div> </label>

2.2 外框 wrapper + 底座 box 樣式

/* 外框 */ .box-wrapper {cursor: pointer; }/* 輸入框 */ .box-wrapper > input {display: none; }/* 底座 */ .box-wrapper > .box {position: relative;width: 70px;height: 40px;border-radius: 20px;background: var(--color_red);box-shadow: 0 10px 20px var(--shadow_red);transition: background 0.3s ease, box-shadow 0.3s ease; }.box-wrapper > input:checked + .box {background: var(--color_green);box-shadow: 0 10px 20px var(--shadow_green); }

整個 label 使用 cursor: pointer;；隱藏 input 元素；底座使用圓角矩形 + 開關變色 + 漸變動畫

2.3 白色按鈕 but

/* 按鈕 */ .box-wrapper > .box > .but {position: absolute;top: 4px;left: 4px;width: 32px;height: 32px;border-radius: 50%;background: #fff;transition: left 0.45s ease; }.box-wrapper > input:checked + .box > .but {left: 34px; }

按鈕就是一個白色圓形，按選中狀態決定定位，并加上 transition 漸變

2.4 表情符號

表情是比較有趣的部分，使用 before 偽元素的 background + box-shadow 實現眼睛

/* 按鈕表情 */ .box-wrapper > .box > .but::before {content: '';position: absolute;top: 8px;left: 7px;width: 6px;height: 6px;border-radius: 50%;background: var(--color_red);box-shadow: 12px 0 0 var(--color_red);transition: background 0.3s ease, box-shadow 0.3s ease; }.box-wrapper > input:checked + .box > .but::before {background: var(--color_green);box-shadow: 12px 0 0 var(--color_green); }

然后使用 after 偽元素實現嘴巴

.box-wrapper > .box > .but::after {content: '';position: absolute;top: 21px;left: 9px;width: 14px;height: 4px;border-radius: 4px;background: var(--color_red);transition: background 0.3s ease, top 0.45s ease, height 0.45s ease, border-radius 0.45s ease; }.box-wrapper > input:checked + .box > .but::after {top: 20px;height: 6px;border-radius: 0;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;background: var(--color_green); }

其他資源

參考連接

TitleLink

CSS Custom Checkbox Design	Html CSS Tutorial @Online Tutorials

完整代碼示例

https://github.com/superfreeeee/Blog-code/tree/main/front_end/css/css_checkbox_design

總結

以上是生活随笔為你收集整理的CSS 实战: Switch 按钮开关(checkbox 实现)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。