CSS實現開關特效
點選後
index.css:
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
label{
transform: scale(2);
width: 100px;
height: 50px;
border: solid 1px #ddd;
background: #ddd;
border-radius: 25px;
position: relative;
overflow: hidden;
}
label input{
visibility: hidden;
}
label input::after{
visibility: visible;
content: '';
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 0;
background: #fff;
border-radius: 50%;
left: 5px;
top: 5px;
transition: all 0.2s;
}
label input:checked::after{
transform: translateX(50px);
}
/* 關於背景顏色變化 */
label input::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: visible;
transition: all 0.2s;
}
label input:checked::before{
background: rgb(70, 175, 93);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<label>
<input type="checkbox" class="checked">
</label>
</body>
</html>
相關文章
- CSS3實現全景圖特效CSSS3特效
- jQuery/CSS3實現圖片層疊展開特效jQueryCSSS3特效
- 純CSS3實現圖片展示特效CSSS3特效
- jQuery/CSS3實現滑鼠點選波浪特效jQueryCSSS3特效
- js和css3實現的載入等待特效JSCSSS3特效
- 純CSS3實現滑動開關效果CSSS3
- HTML+CSS實現選單的3D翻轉特效HTMLCSS3D特效
- WebGL 實現雨水特效實驗Web特效
- CSS3 動畫實現的 3D 圖片過渡特效CSSS3動畫3D特效
- 用canvas實現流星特效Canvas特效
- iHover – 30+ 純 CSS 實現的超炫的圖片懸停特效CSS特效
- css3實現的開關按鈕程式碼例項CSSS3
- Android實現粒子爆炸特效Android特效
- 用jQuery實現翻書特效jQuery特效
- CSS 實現搜尋相關互動CSS
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- 【CSS】圖片動畫特效(相框)CSS動畫特效
- .滑鼠點選愛心特效的實現特效
- 好程式設計師web前端培訓分享CSS3實現全景圖特效程式設計師Web前端CSSS3特效
- 網站開發之滑鼠懸停簡單特效實現(四)網站特效
- 在 iOS 中使用 GLSL 實現抖音特效iOS特效
- Jquery實現微博分享評論表情特效jQuery特效
- jQuery實現圖示特效(精靈圖)jQuery特效
- 直播特效的實現原理與難點特效
- 雅蛙網ajax特效jQuery實現方法特效jQuery
- 特效實現用查表法實現對水波的模擬(轉)特效
- SegmentFault 思否技術週刊 Vol.55 -- Amazing!CSS 也能實現炫酷特效CSS特效
- css實現居中CSS
- 使用CADisplayLink實現UILabel動畫特效UI動畫特效
- Android 中 View 炸裂特效的實現分析AndroidView特效
- iOS實現超酷頁面切換動畫特效iOS動畫特效
- Jquery實現的Switch開關按鈕(仿iOS開關)jQueryiOS
- CSS3 單選框動畫特效CSSS3動畫特效
- loading動畫的效能優化-摒棄Canvas,擁抱CSS3-實現點選特效動畫優化CanvasCSSS3特效
- 【css】純CSS3模仿3D星空動畫特效CSSS33D動畫特效
- 純CSS3實現超炫酷的3D開關切換按鈕CSSS33D
- jQuery實現的簡單焦點圖特效實現過程詳解jQuery特效
- 關於ie中實現彈性盒模型-我的css模型CSS