制作css开关,纯css实现开关效果
大家好，我又來了，這次給大家表演使用純css實(shí)現(xiàn)開關(guān)效果
首先是構(gòu)思
我們使用標(biāo)簽來實(shí)現(xiàn)這個(gè)效果。
checkbox的選中、未選中的特性，剛好對應(yīng)開關(guān)的打開、關(guān)閉
on:打開 off:關(guān)閉
未選中，則關(guān)閉開關(guān)
選中，則打開開關(guān)
開始畫出off、on狀態(tài)的草圖
這里要講解一下，使用了position來實(shí)現(xiàn)的定位。有不了解的同學(xué)可以打開MDN查看相關(guān)知識
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实现开关效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10计算机添加右键菜单,win10
- 下一篇： 人类一败涂地显示服务器,人类一败涂地怎么