制作css开关,纯css实现开关效果
大家好，我又來(lái)了，這次給大家表演使用純css實(shí)現(xiàn)開(kāi)關(guān)效果
首先是構(gòu)思
我們使用標(biāo)簽來(lái)實(shí)現(xiàn)這個(gè)效果。
checkbox的選中、未選中的特性，剛好對(duì)應(yīng)開(kāi)關(guān)的打開(kāi)、關(guān)閉
on:打開(kāi) off:關(guān)閉
未選中，則關(guān)閉開(kāi)關(guān)
選中，則打開(kāi)開(kāi)關(guān)
開(kāi)始畫(huà)出off、on狀態(tài)的草圖
這里要講解一下，使用了position來(lái)實(shí)現(xiàn)的定位。有不了解的同學(xué)可以打開(kāi)MDN查看相關(guān)知識(shí)
off狀態(tài)草圖
on狀態(tài)草圖
.toggle{
display:inline-block;
position:relative;
height:25px;
width:50px;
border-radius:4px;
background:#CC0000;
}
.cookie{
position:absolute;
left:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
.toggle2{
display:inline-block;
position:relative;
height:25px;
width:50px;
padding:2px;
border-radius:4px;
background:#66CC33;
}
.cookie2{
position:absolute;
right:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
然后我們將這兩個(gè)草圖放到label內(nèi)
結(jié)合label和checkbox整理、優(yōu)化css
.toggle-finish{
cursor:pointer;
display:inline-block;
position:relative;
height:25px;
width:50px;
border-radius:4px;
background:#CC0000;
}
.cookie-finish{
position:absolute;
left:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
input:checked + .toggle-finish{
background:#66CC33;
}
input:checked + .toggle-finish .cookie-finish{
left:auto;
right:2px;
}
總結(jié)
以上是生活随笔為你收集整理的制作css开关,纯css实现开关效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： win10计算机添加右键菜单,win10
- 下一篇： 人类一败涂地显示服务器,人类一败涂地怎么