純CSS3實現超炫酷的3D開關切換按鈕
本文由碼農網 – 小峰原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃!
這是一款用純CSS3實現的開關切換按鈕,按鈕一共有四組樣式,每一組按鈕都有3D的視覺效果。和普通按鈕不同的是,它們都有著開關切換的用途,也就是說點選按鈕可以在兩個不同的狀態下進行切換,效果非常棒。實現原理也是比較簡單的,主要利用CSS3重寫checkbox的樣式,3D的效果也是CSS3實現的。
這裡我們對第二種樣式進行簡單的程式碼說明。
HTML程式碼
<section class="main"> <div class="switch demo2"> <input type="checkbox"> <label></label> </div> <div class="switch demo2"> <input type="checkbox" checked> <label></label> </div> </section>
CSS程式碼:
.switch.demo2 { width: 50px; height: 100px; } .switch.demo2 label { background: #cbc7bc; margin: 0 auto; border-radius: 5px; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), 0 2px 0 rgba(255,255,255,0.6), inset 0 10px 1px #e5e5e5, inset 0 11px 0 rgba(255,255,255,0.5), inset 0 -45px 3px #ddd; } .switch.demo2 label:after { content: ""; position: absolute; top: -20px; left: -25px; bottom: -20px; right: -25px; background: #ccc; background: -moz-linear-gradient(#ddd, #bbb); background: -ms-linear-gradient(#ddd, #bbb); background: -o-linear-gradient(#ddd, #bbb); background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb)); background: -webkit-linear-gradient(#ddd, #bbb); background: linear-gradient(#ddd, #bbb); z-index: -1; border-radius: 5px; border: 1px solid #bbb; box-shadow: 0 0 5px 1px rgba(0,0,0,0.15), 0 3px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5); } .switch.demo2 label:before { content: ""; position: absolute; width: 8px; height: 8px; background: #666; top: -13px; left: 20px; border-radius: 50%; box-shadow: 0 120px 0 #666, 0 1px 0 white, 0 121px 0 white; } .switch.demo2 input:checked ~ label { background: #d2cbc3; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), inset 0 -10px 0 #aaa, 0 2px 0 rgba(255,255,255,0.1), inset 0 45px 3px #e0e0E0, 0 8px 6px rgba(0,0,0,0.18); }
本文連結:http://www.codeceo.com/article/pure-css3-switch-button.html
本文作者:碼農網 – 小峰
[ 原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]
相關文章
- 超炫酷3D立體的CSS3彈性按鈕3DCSSS3
- 精選10款CSS3實現的酷炫按鈕效果CSSS3
- Android——Activity切換炫酷動畫實現Android動畫
- 7款純CSS3實現的炫酷動畫應用CSSS3動畫
- 8 個超炫酷的純 CSS3 動畫及原始碼分享CSSS3動畫原始碼
- Android Fragment實現按鈕間的切換AndroidFragment
- css3實現的開關按鈕程式碼例項CSSS3
- Flutter 實現酷炫的3D效果Flutter3D
- 點選按鈕實現狀態切換效果
- 點選按鈕實現圖片切換效果
- FloatingDragButton:炫酷的拖拽浮動按鈕
- 自定義一個酷炫的提交完成按鈕
- three.js實現炫酷的3d影院JS3D
- 炫酷實用的jQuery外掛 涵蓋選單、按鈕、圖片jQuery
- Jquery實現的Switch開關按鈕(仿iOS開關)jQueryiOS
- CSS3 checkbox開關按鈕效果CSSS3
- CSS3滑動開關按鈕效果CSSS3
- CSS3 3D立體按鈕CSSS33D
- 點選按鈕實現切換頁面背景顏色效果
- 純CSS實現Tab欄的切換CSS
- javascript閉包的使用–按鈕切換JavaScript
- 超級炫酷的3D旋轉動態圖——Python程式碼實現3DPython
- 點選按鈕實現隱藏和顯示的切換程式碼
- 利用SVG和css3實現炫酷的邊框動畫SVGCSSS3動畫
- 用純css實現Tab切換CSS
- 我用 CSS3 實現了一個超炫的 3D 載入動畫CSSS33D動畫
- 純CSS3實現滑動開關效果CSSS3
- 純CSS3發光按鈕動畫 非常絢麗CSSS3動畫
- jQuery點選按鈕實現div的隱藏和顯示切換效果jQuery
- css3實現的美觀的提交按鈕效果CSSS3
- Android 自定義實現switch開關按鈕Android
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 超漂亮的CSS3按鈕製作教程分享CSSS3
- 請問各位大佬,vue如何實現點選按鈕切換圖片的效果?Vue
- 點選同一按鈕實現div的隱藏與顯示切換
- 純css3實現的超炫checkbox核取方塊和radio單選框CSSS3
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- 敲酷炫的 ViewPager 切換效果和彈性指示器。Viewpager