Home > Article > Web Front-end > How to implement radio button animation effects in CSS3

How to implement radio button animation effects in CSS3

php中世界最好的语言Original: 2017-11-25 14:05:402005browse

How to implement radio button animation effects in CSS3? Why do we need to implement radio button animation effects? Let's give you two examples to help you master the use of CSS3 to implement radio button animation effects

<div>
<input type="radio" name="radio-1" id="radio-1-1" checked="checked">
<label for="radio-1-1"></label>
<input type="radio" name="radio-1" id="radio-1-2">
<label for="radio-1-2"></label>
<input type="radio" name="radio-1" id="radio-1-3">
<label for="radio-1-3"></label>
</div>

Here, we specify the type value of the input tag as radio, and specify the names of all radios The values are all the same, so that the single selection effect can be achieved. Regarding the for attribute in the label here, I didn’t understand why it was set like this at first. Later, I searched for the definition of this attribute. Anyway, the general meaning is that as long as this attribute is set, when we click on the label element, browse The receiver will automatically shift focus to the radio. Next, use CSS to set effects 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. I have introduced most of the attributes in previous articles. The only unfamiliar attribute is cursor. This attribute is used to set the mouse style. , after setting it to pointer, when our mouse is placed on the label element, the mouse style becomes a hand (this is the case on my computer). Okay, let’s continue to look at

.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;
}

Here we use the after selector. Why set this attribute? Just to set the little black dot as shown in the picture above. First we set the content attribute to empty, which means we don't need to fill it with any content, 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. The effect is to hide 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;
}

Note that the + symbol is used here. What does it mean? Its scientific name is called adjacent sibling selector, which means to select the element immediately after another element, and both have the same parent element. What it means here is to select the label that appears after the radio. Someone wants to ask, Why do we set this up? Just set the label directly. Imagine that in a very large system, we may use the label element many times. In order to avoid confusion, this setting will be more accurate. Here we see the transition attribute, which is used to set the transition effect. Finally, hide our radio and we’re done.

.radio-1 [type="radio"]{        display: none;
}
Action two

This is our second special effect

demo2.gif

In fact, the first feeling when seeing this animation is that it is exactly the same as the previous one, except that the transform attribute Set it to rotate. I won’t explain it anymore. As long as you combine it with the previous example, you can easily create such an effect. Let’s go directly to the code:

 
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Radio</title>
<style>
.radio-2 { width: 900px;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;
}    </style></head><body><div>
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label>
<input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label>
<input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label></div></body><ml>

I believe everyone has read these two examples. It is now clear how to implement radio button animation effects in CSS3. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to implement radio button animation effects in CSS3

Related articles