純CSS3代碼實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
更新時(shí)間：2015年08月19日 10:42:01 投稿：mrr
CSS33D炫酷左右滑動(dòng)開(kāi)關(guān)按鈕是一款非?？岬腃SS3 3D開(kāi)關(guān)按鈕，點(diǎn)擊按鈕可以左右滑動(dòng)，就像開(kāi)關(guān)打開(kāi)閉合一樣的效果，通過(guò)本篇文章給大家介紹純CSS3代碼實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果，需要的朋友可以參考下
廢話不多說(shuō)了，炫下效果圖并附上演示和源碼下載。
實(shí)現(xiàn)效果如下：
HTML結(jié)構(gòu)代碼：
CSS代碼：
/*表單開(kāi)關(guān)樣式*/
.ui-switch {
position: absolute;
font-size: .16rem;
right:0.07rem;
top: 50%;
margin-top: -0.16rem;
width: .7rem;
height: .3rem;
line-height: .3rem;
}
.ui-switch input {
width: .7rem;
height: .3rem;
position: absolute;
top: 0;left: 0;
z-index: 2;
border: 0;
background: 0 0;
-webkit-appearance: none;
outline: 0
}
.ui-switch input:before {
content: '';
width: .68rem;
height: .3rem;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
border-radius: .2rem;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border-color: #dfdfdf;
-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
box-shadow: #dfdfdf 0 0 0 0 inset;
-webkit-transition: border .4s,-webkit-box-shadow .4s;
transition: border .4s,box-shadow .4s;
-webkit-background-clip: content-box;
background-clip: content-box
}
.ui-switch input:checked:before {
border-color: #64bd63;
-webkit-box-shadow: #64bd63 0 0 0 0.16rem inset;
box-shadow: #64bd63 0 0 0 0.16rem inset;
background-color: #64bd63;
transition: border .4s,box-shadow .4s,background-color 1.2s;
-webkit-transition: border .4s,-webkit-box-shadow .4s,background-color 1.2s;
background-color: #64bd63
}
.ui-switch input:checked:after {
left: .4rem
}
.ui-switch input:after {
content: '';
width:.3rem;
height: .3rem;
position: absolute;
top: 50%;
left: 0;
-webkit-transform:translateY(-50%);
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
-webkit-transition: left .2s;
transition: left .2s
}
相關(guān)文章
JavaScript中數(shù)組slice和splice的對(duì)比小結(jié)
相信對(duì)很多學(xué)習(xí)JavaScript語(yǔ)言的人來(lái)說(shuō)，都會(huì)經(jīng)常搞不清slice和splice這兩個(gè)方法。它們雖然名稱相似，但是功能卻完全不同。所以這篇文章就給大家詳細(xì)整理了關(guān)于JavaScript中數(shù)組slice和splice的對(duì)比，有需要的可以參考學(xué)習(xí)。2016-09-09
微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
JavaScript之創(chuàng)意時(shí)鐘項(xiàng)目(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇JavaScript之創(chuàng)意時(shí)鐘項(xiàng)目。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)一鍵回到頂部功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Bootstrap進(jìn)度條學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap進(jìn)度條的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料，需要的朋友可以參考下。2015-08-08
JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法,涉及javascript數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05