利用css3完成switch checkbox按鈕

在日常開發中，switch按鈕也是非常常見的。如圖：

原型**於開源框架jquery-weui。貼上對應的**：

.button-wrap 

.button-wrap input 
.button-wrap input:before 
.button-wrap input:after 
.button-wrap input:checked 
.button-wrap input:checked:before 
.button-wrap input:checked:after 

ie10正常，ie11貌似不行？？？？沒細究。那接下來還有一種版本，相容型不錯。ie未測，ff還不錯。

.button-wrap-ff 

.switchcp 
.switchcp>* 
.switchcp-input 
.switchcp-input:checked~.switchcp-box 
.switchcp-input:checked~.switchcp-box:before 
.switchcp-input:checked~.switchcp-box:after 
.switchcp-box 
.switchcp-box:before 
.switchcp-box:after 

利用css3實現箭頭

在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...

利用CSS3的transition屬性實現滑動效果

首先援引一下w3school上的transition基本知識 定義和用法 transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性 transition property transition duration transition timing function transition del...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...