您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)如何使用CSS實(shí)現(xiàn)開(kāi)關(guān)按鈕的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
HTML
需要用到的HTML并不是我們之前沒(méi)見(jiàn)過(guò)的,也就是一個(gè)標(biāo)準(zhǔn)的checkbox結(jié)合一個(gè)label。我們用一個(gè)div將checkox和label包裹起來(lái),并給這個(gè)div添加了一個(gè)switch的樣式類(lèi)。
label的樣式則會(huì)使用input + label選擇器來(lái)定位,那樣label就不需要自己的樣式類(lèi)名了?,F(xiàn)在讓我們來(lái)看下下面的HTML結(jié)構(gòu):
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1"></label>
</div>
<div class="switch">
<input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-4"></label>
</div>
<div class="switch">
<input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
</div>
這里沒(méi)什么特別的。對(duì)于CSS,我們希望真實(shí)的checkbox被隱藏在屏幕和視線之外?;旧纤械臉邮蕉急患釉趌abel上。這樣做很方便,因?yàn)辄c(diǎn)擊label實(shí)際上會(huì)勾選/取消勾選checkbox。我們將用下面的CSS來(lái)實(shí)現(xiàn)切換開(kāi)關(guān):
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
樣式一
此時(shí)label充當(dāng)容器的角色,并擁有寬和高。我們還給它設(shè)置了一個(gè)背景顏色來(lái)模擬我們的切換開(kāi)關(guān)的邊界。:before元素模擬開(kāi)關(guān)內(nèi)部的淺灰色區(qū)域(開(kāi)關(guān)打開(kāi)時(shí)背景顏色會(huì)過(guò)渡到綠色)。:after元素才是真正的圓形開(kāi)關(guān),它的層級(jí)高于一切,在點(diǎn)擊時(shí)的時(shí)候它將從左滑動(dòng)到右。我們將給:after元素添加一個(gè)box-shadow使它看起來(lái)更加立體。當(dāng)input接受:checked偽類(lèi)時(shí),我們將平滑的改變:before元素的背景顏色和:after元素的位置。CSS如下:
input.cmn-toggle-round + label {
padding: 2px;
width: 120px;
height: 60px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 58px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
margin-left: 60px;
}
樣式二
接下來(lái)的這個(gè)例子和上面的例子非常相似,主要的區(qū)別在于它的外觀表現(xiàn)。它符合現(xiàn)代網(wǎng)站平滑扁平化趨勢(shì),但是就功能而言和例1一樣。下面的CSS僅僅改變了toggle的表現(xiàn)風(fēng)格,其他的都是一樣的。
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 120px;
height: 60px;
background-color: #dddddd;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 52px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 60px;
background-color: #8ce196;
}
樣式三
現(xiàn)在,我們要做一點(diǎn)不一樣的事了。我們將會(huì)創(chuàng)建一個(gè)翻轉(zhuǎn)風(fēng)格的switcher開(kāi)關(guān)。默認(rèn)視圖為灰色,并顯示“No”(或任何表示未選中的內(nèi)容),勾選后的視圖則為綠色,并顯示“Yes”。當(dāng)點(diǎn)擊label時(shí),swithcer會(huì)沿Y軸翻轉(zhuǎn)180度。我們將使用“data-attributes”來(lái)填充未選中/已選中時(shí)內(nèi)容。這些“data-attributes”在HTML中由“data-on”和“data-off”指定,他們將分別填充到:after和:before兩個(gè)偽元素中。請(qǐng)注意:after偽元素中的backface-visiibility屬性,由于起點(diǎn)是-180度,通過(guò)這個(gè)屬性可以隱藏背面的內(nèi)容。
input.cmn-toggle-yes-no + label {
padding: 2px;
width: 120px;
height: 60px;
}
input.cmn-toggle-yes-no + label:before,
input.cmn-toggle-yes-no + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
font-family: "Roboto Slab", serif;
font-size: 20px;
text-align: center;
line-height: 60px;
}
input.cmn-toggle-yes-no + label:before {
background-color: #dddddd;
content: attr(data-off);
transition: transform 0.5s;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
background-color: #8ce196;
content: attr(data-on);
transition: transform 0.5s;
transform: rotateY(180deg);
backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
transform: rotateY(0);
}
瀏覽器兼容性
上面的這些在瀏覽器兼容方面的要求是,IE8及以下的瀏覽器不能識(shí)別:checked偽類(lèi),因此你需要檢測(cè)瀏覽器,如果是老舊的IE,則直接回退到原始的checkbox,css transitions 屬性不支持IE9及以下瀏覽器,但這僅僅會(huì)影響切換過(guò)程中的過(guò)渡部分,除此之外沒(méi)有其他毛病能夠正常工作。
感謝各位的閱讀!關(guān)于“如何使用CSS實(shí)現(xiàn)開(kāi)關(guān)按鈕”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。