你見過嗎?9款超炫的核取方塊(Checkbox)效果

2022-04-04 09:57:24 字數 1919 閱讀 1588

核取方塊(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 比例雖低,數量還是有的,條件允許的話,一定要多寫寫她們,程式設計師活躍社群不能只被男性霸佔。今天要寫的這位妹子並不是我司的,不過她是乙個讓男生汗顏,讓女生仰慕的精緻程式媛,不僅職業上裝備精良,生活上也是興趣廣泛。這麼好一妹子怎麼就走...