整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在之前的一篇文章《默認的input標簽太丑？教你如何使用CSS寫出帶動畫的樣式》中有講過如何實現(xiàn)一個漂亮的input標簽樣式。
既然已經(jīng)折騰了，今天這篇文章我們就繼續(xù)折騰，看看如何通過CSS3實現(xiàn)一個帶動畫的checkbox樣式？
CSS3
感興趣的可以自行去github上看源文件，地址如下：
https://github.com/zhouxiongking/article-pages/blob/master/articles/beautifulCheckbox/beautifulCheckbox.html
checkbox作為多選框，在form表單中的使用頻率是非常高的，例如問卷調(diào)查的多選題，個人興趣愛好的選擇時都會用到多選框。
而瀏覽器默認的checkbox樣式都很丑，看起來就是一個小小的方框，雖然Bootstrap已經(jīng)有好看的checkbox樣式，但是它不支持動畫，在交互上仍然存在缺陷，所以我們就試圖自己寫出一個帶動畫的checkbox效果。
首先我們來看看checkbox的動態(tài)效果圖（中間的黑色圓圈實際為錄制GIF圖時產(chǎn)生的，請忽略）
checkbox效果圖
接下來我們具體分析下頁面的元素組成，主要包括以下部分。
默認的checkbox標簽，將其display設置為none，隱藏起來。
label標簽，表現(xiàn)為實際顯示的動態(tài)選中和未選中效果。
我們需要達到的效果是，在未選中checkbox時，默認為灰色的邊框，白色的背景；在選中checkbox時，改變背景色，出現(xiàn)白色的打勾動畫效果。
在這部分，我們來具體分析下頁面的代碼組成。
HTML
首先是頁面的HTML部分代碼，如上一部分所示，頁面其實只有兩個元素組成，這兩個元素放在一個容器下，故HTML代碼如下所示。
HTML部分代碼
CSS
我們來看看CSS部分的代碼，因為CSS部分代碼比較多，我們一一來分析。
首先是外層container的樣式，同時對頁面的html和body也做一些簡單處理，代碼如下所示。
container樣式
其次是checkbox標簽的樣式，因為原生的checkbox除了在傳輸數(shù)據(jù)時有用處，在頁面呈現(xiàn)上并沒有作用，故設置display:none;將其隱藏。
checkbox樣式
然后是最重要的label部分，在未點擊之前l(fā)abel呈現(xiàn)一個正方形，有基本的樣式。
基本樣式
在點擊方形框后，出現(xiàn)的對勾是通過偽元素::before和::after實現(xiàn)的，對勾實際為兩個矩形拼接而成，左側(cè)的矩形用::after元素表示，右側(cè)的矩形用::before元素表示。兩者的通用樣式通過如下代碼實現(xiàn)。
偽元素實現(xiàn)
然后是針對::before和::after所特有的樣式，因為兩者的位置和旋轉(zhuǎn)的角度不同，代碼也會出現(xiàn)差異。
特有樣式
然后是定義的打鉤的動畫效果，這里使用keyframes關(guān)鍵字定義，考慮到瀏覽器兼容性，定義的動畫具有不同的前綴。定義的動畫也包括兩部分，首先是右側(cè)的矩形動畫效果。
右側(cè)矩形動畫效果
然后是左側(cè)矩形的動畫效果，同樣考慮到瀏覽器的兼容性，樣式代碼如下。
左側(cè)矩形動畫
至此，所有代碼都已講解完畢，如果運行之后就會看到文章開始的動畫效果。
本篇文章主要講的是如何使用自定義的動畫完成checkbox效果，感興趣的可以直接去github上看源文件代碼，后續(xù)會寫一個跟開關(guān)switch有關(guān)的文章，敬請期待~
本篇文章里，我們一起學習下如何使用 CSS checkbox hack 技巧制作一個響應式的手風琴組件，這個組件完全基于CSS，沒有JavaScript腳本，基于窗口大小進行水平和垂直之間進行切換。為了讓大家更好理解，我將和大家一起一步步的進行完成。
下圖是我們要制作的手風琴效果
本示例需要你具備一些關(guān)于flexbox的知識。
CSS Checkbox Hack 允許你通過復選框（Checkbox）是否選中（或單選按鈕radio buttons）來控制某些特定的樣式。這里運用的是：checked 偽類選擇器，其意思就是”如果選中了表單（復選框、單選按鈕），則應用相關(guān)樣式規(guī)則“
我們通常隱藏表單控件，然后結(jié)合<lable>來控制復選框或單選框的選擇，制作一些特殊的效果，因此用戶無法感知復選框的存在。
這是我的最愛，不僅可以完成本文的例子，還會制作一些更有趣例子，稍后會介紹到。
在本練習中，我們從維基百科找一些四種不同類型的內(nèi)容介紹：動物、植物、空間和河流。然后我們創(chuàng)建相應的單選按鈕，并為其分配內(nèi)容關(guān)鍵詞：
建立無序列表
接下來，我們設置一個包含4行的無序列表，每行列表<li>包含了標題項<lable>標簽和內(nèi)容項<div>標簽：
基于上面的思路，整理后無需列表內(nèi)容如下：
準備好上述的HTML內(nèi)容后，我們來定義相關(guān)樣式，首先我們需要隱藏我們的幾個單選按鈕，我們可以使用left屬性，將其移除屏幕顯示區(qū)域，示例代碼如下：
接下來我們來定義手風琴整體外觀布局，讓其具有響應式，用到了彈性盒子布局，設置display:flex, 同時又應用到了CSS的自定義變量新屬性，方便我們進行統(tǒng)一設置和修改，示例代碼如下：
然后我們定義無需列表<li>標簽的樣式，也設置其為彈性盒子布局，示例代碼如下：
為了區(qū)分每個<li> 選型，讓其有分割的感覺，我們來定義其邊框?qū)傩裕纠a如下：
每個選項卡容器，讓標題默認在縱軸上進行布局，然后設置標題選項卡的寬度為70px，以及定義鼠標經(jīng)過的外觀樣式:
由于寬度有限，我們需要旋轉(zhuǎn)標題文字的方向，讓其由下往上垂直顯示，示例代碼如下：
最后我們來定義選項卡內(nèi)容文本的樣式，我們應該默認第一個選項卡的內(nèi)容出于展示狀態(tài)，其它選項卡隱藏，這里我們先讓所有的選項卡默認隱藏，后面我們會使用 Checkbox Hack 讓選中的選項卡內(nèi)容處于展示狀態(tài)。示例代碼如下：
這部分代碼就像變魔法一般，當我們點擊每個標題選型卡內(nèi)容時就響應顯示相關(guān)內(nèi)容，這里我們使用了 :checked 偽類，以及結(jié)合 CSS的后續(xù)同胞選擇器（~）以及 緊鄰同胞選擇器（+）。
接下來我們來動手實踐吧，為了讓對應選中的選項卡內(nèi)容可見，我們使用 display: flex 讓其可見，并使用 align-items: center 屬性讓文本內(nèi)容垂直居中。同時為了讓用戶區(qū)分選中了哪個選項卡，我們需要定義選項卡出于選中狀態(tài)時的標題顏色。
最后定義一個可選的外觀樣式，當每個單選按鈕獲取焦點時，我們?yōu)閘able標簽定義outline屬性，這個細節(jié)幫組我們增強組件的可訪問性。（accessibility）
以下是完成后的CSS代碼內(nèi)容：
接下來我們來處理下，在小屏或可視窗口低于 650px 的情況，幸虧我們使用了彈性盒子布局，在這種情況下，我們讓手風琴垂直顯示，也就是每個選項卡縱向分布，每個選項卡的標題內(nèi)容橫向分布。示意圖效果如下：
對應的代碼如何實現(xiàn)呢？首先我們需要更改無序列表讓其為縱向分布，flex-direction: column；然后更改選型卡的標題區(qū)域布局為橫向分布，flex-direction: row，示意代碼如下：
在我們的案例中，每個選項卡的內(nèi)容都很多，看起來很漂亮。但是為了確保沒有足夠內(nèi)容支撐時，手風琴效果不走樣，我們需要進行一些樣式上的特殊處理，效果如下圖所示：
基于以上思路，我們調(diào)整后的html代碼如下，只是在li標簽上增加了自定義屬性（data-radio），代碼如下：
CSS部分修部分的代碼如下：
1、HTML代碼部分：
2、CSS代碼部分：
今天的案例就和大家聊到這里，通過本文，我們一起學習了如何使用 CSS checkbox hack 技術(shù)完成了一個純CSS手風琴效果， CSS checkbox hack 不僅能做手風琴效果，還有更多有趣的效果等待你挖掘，比如實現(xiàn)常見的導航切換、點擊按鈕彈出層的效果，不用寫一行JS代碼，是不是覺得CSS很神奇呢，在接下來的文章，我將會給大家繼續(xù)分享 CSS checkbox hack 的案例，敬請期待。
在之前的一篇文章《默認的input標簽太丑？教你如何使用CSS寫出帶動畫的樣式》中有講過如何實現(xiàn)一個漂亮的input標簽樣式。
既然已經(jīng)折騰了，今天這篇文章我們就繼續(xù)折騰，看看如何通過CSS3實現(xiàn)一個帶動畫的checkbox樣式？
CSS3
感興趣的可以自行去github上看源文件，地址如下：
https://github.com/zhouxiongking/article-pages/blob/master/articles/beautifulCheckbox/beautifulCheckbox.html
checkbox作為多選框，在form表單中的使用頻率是非常高的，例如問卷調(diào)查的多選題，個人興趣愛好的選擇時都會用到多選框。
而瀏覽器默認的checkbox樣式都很丑，看起來就是一個小小的方框，雖然Bootstrap已經(jīng)有好看的checkbox樣式，但是它不支持動畫，在交互上仍然存在缺陷，所以我們就試圖自己寫出一個帶動畫的checkbox效果。
首先我們來看看checkbox的動態(tài)效果圖（中間的黑色圓圈實際為錄制GIF圖時產(chǎn)生的，請忽略）
checkbox效果圖
接下來我們具體分析下頁面的元素組成，主要包括以下部分。
默認的checkbox標簽，將其display設置為none，隱藏起來。
label標簽，表現(xiàn)為實際顯示的動態(tài)選中和未選中效果。
我們需要達到的效果是，在未選中checkbox時，默認為灰色的邊框，白色的背景；在選中checkbox時，改變背景色，出現(xiàn)白色的打勾動畫效果。
在這部分，我們來具體分析下頁面的代碼組成。
HTML
首先是頁面的HTML部分代碼，如上一部分所示，頁面其實只有兩個元素組成，這兩個元素放在一個容器下，故HTML代碼如下所示。
HTML部分代碼
CSS
我們來看看CSS部分的代碼，因為CSS部分代碼比較多，我們一一來分析。
首先是外層container的樣式，同時對頁面的html和body也做一些簡單處理，代碼如下所示。
container樣式
其次是checkbox標簽的樣式，因為原生的checkbox除了在傳輸數(shù)據(jù)時有用處，在頁面呈現(xiàn)上并沒有作用，故設置display:none;將其隱藏。
checkbox樣式
然后是最重要的label部分，在未點擊之前l(fā)abel呈現(xiàn)一個正方形，有基本的樣式。
基本樣式
在點擊方形框后，出現(xiàn)的對勾是通過偽元素::before和::after實現(xiàn)的，對勾實際為兩個矩形拼接而成，左側(cè)的矩形用::after元素表示，右側(cè)的矩形用::before元素表示。兩者的通用樣式通過如下代碼實現(xiàn)。
偽元素實現(xiàn)
然后是針對::before和::after所特有的樣式，因為兩者的位置和旋轉(zhuǎn)的角度不同，代碼也會出現(xiàn)差異。
特有樣式
然后是定義的打鉤的動畫效果，這里使用keyframes關(guān)鍵字定義，考慮到瀏覽器兼容性，定義的動畫具有不同的前綴。定義的動畫也包括兩部分，首先是右側(cè)的矩形動畫效果。
右側(cè)矩形動畫效果
然后是左側(cè)矩形的動畫效果，同樣考慮到瀏覽器的兼容性，樣式代碼如下。
左側(cè)矩形動畫
至此，所有代碼都已講解完畢，如果運行之后就會看到文章開始的動畫效果。
本篇文章主要講的是如何使用自定義的動畫完成checkbox效果，感興趣的可以直接去github上看源文件代碼，后續(xù)會寫一個跟開關(guān)switch有關(guān)的文章，敬請期待~
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
