Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve the super cool checkbox check box and radio check box". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the cool checkbox check box and radio check box".

This example is implemented entirely by css3 without any js code. Let's take a look at the implementation code.

Html Code:

The code is as follows:

Checkbox

Checkbox

Checkbox

Radio option

Radio option

Radio option

Css3 Code:

The code is as follows:

@-webkit-keyframes click-wave {

0% {

Width: 40px

Height: 40px

Opacity: 0.35

Position: relative

}

100% {

Width: 200px

Height: 200px

Margin-left:-80px

Margin-top:-80px

Opacity: 0.0

}

}

@-moz-keyframes click-wave {

0% {

Width: 40px

Height: 40px

Opacity: 0.35

Position: relative

}

100% {

Width: 200px

Height: 200px

Margin-left:-80px

Margin-top:-80px

Opacity: 0.0

}

}

@-o-keyframes click-wave {

0% {

Width: 40px

Height: 40px

Opacity: 0.35

Position: relative

}

100% {

Width: 200px

Height: 200px

Margin-left:-80px

Margin-top:-80px

Opacity: 0.0

}

}

@ keyframes click-wave {

0% {

Width: 40px

Height: 40px

Opacity: 0.35

Position: relative

}

100% {

Width: 200px

Height: 200px

Margin-left:-80px

Margin-top:-80px

Opacity: 0.0

}

}

. option-input {

-webkit-appearance: none

-moz-appearance: none

-ms-appearance: none

-o-appearance: none

Appearance: none

Position: relative

Top: 13.33333px

Width: 40px

Height: 40px

-webkit-transition: all 0.15s ease-out 0

-moz-transition: all 0.15s ease-out 0

Transition: all 0.15s ease-out 0

Background: # cbd1d8

Border: none

Color: # fff

Cursor: pointer

Display: inline-block

Outline: none

Position: relative

Margin-right: 0.5rem

Z-index: 1000

}

. option-input:hover {

Background: # 9faab7

}

. option-input:checked {

Background: # 40e0d0

}

. option-input:checked::before {

Width: 40px

Height: 40px

Position: absolute

Content:'\ 2716'

Display: inline-block

Font-size: 26.66667px

Text-align: center

Line-height: 40px

}

. option-input:checked::after {

-webkit-animation: click-wave 0.65s

-moz-animation: click-wave 0.65s

Animation: click-wave 0.65s

Background: # 40e0d0

Content:''

Display: block

Position: relative

Z-index: 100

}

. option-input.radio {

Border-radius: 50%

}

. option-input.radio::after {

Border-radius: 50%

}

Body {

Display:-webkit-box

Display:-moz-box

Display: box

-webkit-box-orient: horizontal

-moz-box-orient: horizontal

Box-orient: horizontal

-webkit-box-pack: start

-moz-box-pack: start

Box-pack: start

-webkit-box-align: stretch

-moz-box-align: stretch

Box-align: stretch

Background: # e8ebee

Color: # 9faab7

Font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

Text-align: center

}

Body div {

Padding: 5rem

}

Body label {

Display: block

Line-height: 40px

}

Thank you for your reading, the above is "how to achieve super cool checkbox check box and radio check box" content, after the study of this article, I believe you have a deeper understanding of how to achieve super cool checkbox check box and radio check box, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.