資訊專欄INFORMATION COLUMN
摘要：大家好，我又來了，這次給大家表演使用純實現(xiàn)開關(guān)效果首先是構(gòu)思我們使用標簽來實現(xiàn)這個效果。的選中未選中的特性，剛好對應(yīng)開關(guān)的打開關(guān)閉打開關(guān)閉未選中，則關(guān)閉開關(guān)選中，則打開開關(guān)開始畫出狀態(tài)的草圖這里要講解一下，使用了來實現(xiàn)的定位。
大家好，我又來了，這次給大家表演使用純css實現(xiàn)開關(guān)效果
首先是構(gòu)思我們使用標簽來實現(xiàn)這個效果。
checkbox的選中、未選中的特性，剛好對應(yīng)開關(guān)的打開、關(guān)閉
on:打開 off:關(guān)閉
開始畫出off、on狀態(tài)的草圖
這里要講解一下，使用了position來實現(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;
}
然后我們將這兩個草圖放到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;
}
到此為止就已經(jīng)基本實現(xiàn)一個開關(guān)的功能了，記得將input隱藏起來哦
可以點擊預(yù)覽https://codepen.io/Ritr/pen/W...
另外我還優(yōu)化了一個動畫版
https://codepen.io/Ritr/pen/L...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114950.html
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，包含個元素，分別代表控件開關(guān)和燈光居中顯示定義控件的樣式，把控件的設(shè)置為透明，使其不可見，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://code...
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，包含個元素，分別代表控件開關(guān)和燈光居中顯示定義控件的樣式，把控件的設(shè)置為透明，使其不可見，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://code...
摘要：傳送門效果是這樣的結(jié)構(gòu)小技巧就是，一開始就寫了一組單選按鈕來做開關(guān)的部分。有個地方需要優(yōu)化，就是在換擋的時候，動畫應(yīng)該柔和些。 這次分享的電扇，和以往用css3畫人物相比 多加了一點交互，就是電扇開關(guān)的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現(xiàn)的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...
摘要：傳送門效果是這樣的結(jié)構(gòu)小技巧就是，一開始就寫了一組單選按鈕來做開關(guān)的部分。有個地方需要優(yōu)化，就是在換擋的時候，動畫應(yīng)該柔和些。 這次分享的電扇，和以往用css3畫人物相比 多加了一點交互，就是電扇開關(guān)的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現(xiàn)的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...
閱讀 2174·2021-11-11 16:55
閱讀 1697·2019-08-30 15:54
閱讀 2826·2019-08-30 15:53
閱讀 2223·2019-08-30 15:44
閱讀 1159·2019-08-30 15:43
閱讀 974·2019-08-30 11:22
閱讀 1953·2019-08-29 17:20
閱讀 1574·2019-08-29 16:56
