核取方塊(checkbox)在各個瀏覽器中的效果不一致,因此很多 web 開發人員會自己重新設計一套介面和使用體驗都更佳的核取方塊功能。下面就給大家分享9款超炫的核取方塊(checkbox)效果,純 css3 實現,未使用任何。
前面三款效果都是靈感來自移動應用程式的滑動選擇框效果,在選擇和未選擇狀態之間通過滑動來切換效果,非常的動感。效果的實現方面是借用了乙個 div 標籤和乙個 label 標籤,下面是效果一的 html **示例:12
3456
為了實現圓角和核取方塊的立體感效果,這裡運用了css3的圓角(border-radius)、盒陰影(box-shadow)、漸變(linear-gradient)以及 css3 動畫技術。下面是效果一的 css **示例:12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
4142
.slideone
.slideone label
.slideone input[type=checkbox]
.slideone input[type=checkbox]:checked + label
後面六款效果的互動是我們常見的,使用css3對瀏覽器預設的核取方塊效果進行了美化,並且在各個瀏覽器中表現一致。html **都是類似的,這裡例舉效果五的**:12
3456
78
css **如下:12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
4142
4344
4546
.roundedtwo label
.roundedtwo label:after
.roundedtwo label:hover::after
.roundedtwo input[type=checkbox]
.roundedtwo input[type=checkbox]:checked + label:after
你見過嗎?9款超炫的核取方塊(Checkbox)效果
核取方塊 checkbox 在各個瀏覽器中的效果不一致,因此很多 web 開發人員會自己重新設計一套介面和使用體驗都更佳的核取方塊功能。下面就給大家分享9款超炫的核取方塊 checkbox 效果,純 css3 實現,未使用任何。前面三款效果都是靈感來自移動應用程式的滑動選擇框效果,在選擇和未選擇狀態...
你見過這樣的婚禮嗎?
曾經有這樣乙個故事 一天,在教堂裡面與往常一樣正在舉行一次平凡的婚禮。牧師帶上老花鏡習慣性地開始了那句每個婚禮都不可或缺的問話 莫里斯先生,您愛您的新娘子嗎 我 我不能肯定。新郎莫里斯遲疑地說。他的回答讓在場的所有親朋好友都為之震驚。過了片刻新郎自己打破了寧靜,他說 我不知道自己愛不愛她,我只知道她...
你見過這樣的程式媛嗎
我身邊也有一些程式媛,我廠的程式猿和程式媛的比例大概是79 比21 比例雖低,數量還是有的,條件允許的話,一定要多寫寫她們,程式設計師活躍社群不能只被男性霸佔。今天要寫的這位妹子並不是我司的,不過她是乙個讓男生汗顏,讓女生仰慕的精緻程式媛,不僅職業上裝備精良,生活上也是興趣廣泛。這麼好一妹子怎麼就走...