CSS3實現乙個開關按鈕控制項

又做了乙個左右滑動開關效果的核取方塊。

效果圖：

上圖左側為了顯示資料變化所以顯示出來，實際使用中設定display:none屬性就可以了。

本示例中全部使用html及css實現。

**：

lang="en">

charset="utf-8">
title>
script>
.text
.on.off
.circle
#radio ~label
#radio ~label
.circle
#radio ~label
.on    #radio ~ label
.off
#radio
:checked ~ label
#radio
:checked ~label
.circle
#radio
:checked ~label
.on    #radio
:checked ~ label
.off
label
label
.circle
label
.text
style>
head>
class="container">
type="checkbox"
id="radio"
name="switch">
for="radio"
class="radio">
class="circle">
span>
class="text on">onspan>
class="text off">offspan>
label>
div>
body>
html>
github pages：justforuse

CSS3 按鈕特效 一

其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...

CSS3 按鈕特效 一

其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...

使用CSS3實現乙個3D相簿

css3系列我已經寫過兩篇文章，感興趣的同學可以先看一下 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利用css3屬性來編寫乙個例項，話不多說，先直接看看效果。因為前面已經講解過一些屬性的用法，此篇...