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

This article mainly explains "CSS3 how to achieve radio box animation effects", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS3 how to achieve radio box animation special effects" bar!

HTML code

Here, we specify that the type value of the input tag is radio, and the name values of all radio are the same, so that the radio effect can be achieved. For the for attribute in label here, I don't understand why it is set like this at first, but then I searched for the definition of this attribute. Anyway, it probably means that as long as we set this attribute, when we click on the label element, the browser will automatically shift its focus to radio. Let's use CSS to set the effect on HTML.

.radio-1 {

Width: 900px

Padding: 3% 0%

Margin: 10px auto

Background-color: darkseagreen

Text-align: center

}

.radio-1 label {

Display: inline-block

Position: relative

Width: 28px

Height: 28px

Border: 1px solid # cccccc

Border-radius: 100%

Cursor: pointer

Background-color: # ffffff

Margin-right: 10px

}

Here we first take a look at the settings for the label element, most of which I have introduced in previous articles. The only unfamiliar attribute is cursor, which is set to mouse style. After setting it to pointer, when we place the mouse over the label element, the mouse style becomes a hand (on my computer). All right, let's move on.

.radio-1 label:after {

Content: ""

Position: absolute

Width: 20px

Height: 20px

Top: 4px

Left: 4px

Background-color: # 666

Border-radius: 50%

Transform: scale (0)

Transition: transform .2s ease-out

}

We use the after selector here, so why set this property? It is to set the small black spot as shown in the image above. First of all, we set the content property to empty, which means we don't need to fill anything, because we just want to set the background color to black, that's all. Also, at the beginning, we set the scale value of transform to 0, which has the effect of hiding the small black dots.

Radio-1 [type= "radio"]: checked + label {

Background-color: # eeeeee

Transition: background-color .2s ease-in

}

Radio-1 [type= "radio"]: checked + label:after {

Transform: scale (1)

Transition: transform .2s ease-in

}

Notice that the + symbol is used here. What does it mean? Its scientific name is called neighboring sibling selector, which means to select the element immediately after another element, and the two have the same parent element, which here means to select the label that appears after radio. Someone wants to ask, why do you set this up? just set label directly. Imagine that in a very large system, we might use the label element many times, which would be more accurate to avoid confusion. Here we see the transition property, which is used to set the transition effect. Finally, hide our radio and we're done.

.radio-1 [type= "radio"] {

Display: none

}

Action two

In fact, the first feeling of seeing this animation is exactly the same as the previous one. Except for setting the transform attribute to rotate, I will not explain it any more. As long as you combine the previous example, you can easily achieve such an effect. Let's go directly to the code:

Radio

.radio-2 {width: 900pxscape padding: 3.0%; margin: 50px auto; background-color: darkseagreen; text-align: center

}

.radio-2 label {display: inline-block; width: 28px

Height: 28px; overflow: hidden; border: 1px solid # eeeeee

Border-radius: 100%; margin-right: 10px; background-color: # ffffff; position: relative;cursor: pointer

}

Radio-2 label:after {content: "; position: absolute;top: 4px; left: 4px; width: 20px; height: 20px; background-color: # 666666; border-radius: 50%; transform: rotate (- 180deg); transform-origin:-2px 50%; transition: transform .2s ease-in

}

.radio-2 [type= "radio"] {

Display: none

}

Radio-2 [type= "radio"]: checked + label:after {

Transform: rotate (0deg)

Transition: transform .2s ease-out

}

Thank you for your reading, the above is the content of "CSS3 how to achieve radio box animation special effects". After the study of this article, I believe you have a deeper understanding of how to achieve radio box animation special effects in CSS3, and the specific use needs to be verified in practice. 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.