純css實現開關效果

dendoink 發布于2019-08-30 11:22 / 964人閱讀

摘要：大家好，我又來了，這次給大家表演使用純實現開關效果首先是構思我們使用標簽來實現這個效果。的選中未選中的特性，剛好對應開關的打開關閉打開關閉未選中，則關閉開關選中，則打開開關開始畫出狀態的草圖這里要講解一下，使用了來實現的定位。

大家好，我又來了，這次給大家表演使用純css實現開關效果

首先是構思

我們使用標簽來實現這個效果。
checkbox的選中、未選中的特性，剛好對應開關的打開、關閉
on:打開 off:關閉


  
  未選中，則關閉開關




  
  選中，則打開開關

開始畫出off、on狀態的草圖

這里要講解一下，使用了position來實現的定位。有不了解的同學可以打開MDN查看相關知識

off狀態草圖

on狀態草圖

.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內

結合label和checkbox整理、優化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;
}

到此為止就已經基本實現一個開關的功能了，記得將input隱藏起來哦
可以點擊預覽https://codepen.io/Ritr/pen/W...
另外我還優化了一個動畫版
https://codepen.io/Ritr/pen/L...

GPU云服務器云服務器純CSS css效果效果顯示 css jquery 氣球css js效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114950.html

前端每日實戰：145# 視頻演示如何用純 CSS 創作一個電源開關控件

摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，包含個元素，分別代表控件開關和燈光居中顯示定義控件的樣式，把控件的設置為透明，使其不可見，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://code...

zhangke3016 2019-08-02 11:35 評論0 收藏0
前端每日實戰：145# 視頻演示如何用純 CSS 創作一個電源開關控件

摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，包含個元素，分別代表控件開關和燈光居中顯示定義控件的樣式，把控件的設置為透明，使其不可見，但仍可與用戶交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://code...

ckllj 2019-08-30 15:54 評論0 收藏0
【二次元的CSS】—— 純CSS3做的能換擋的電扇

摘要：傳送門效果是這樣的結構小技巧就是，一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化，就是在換擋的時候，動畫應該柔和些。這次分享的電扇，和以往用css3畫人物相比多加了一點交互，就是電扇開關的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...

Cruise_Chan 2019-08-02 15:54 評論0 收藏0
【二次元的CSS】—— 純CSS3做的能換擋的電扇

摘要：傳送門效果是這樣的結構小技巧就是，一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優化，就是在換擋的時候，動畫應該柔和些。這次分享的電扇，和以往用css3畫人物相比多加了一點交互，就是電扇開關的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...

big_cat 2019-08-30 13:03 評論0 收藏0