How to realize the special effect of check box animation in CSS3
This article mainly explains "how to realize checkbox animation effects in CSS3". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and study and learn "how to realize checkbox animation effects in CSS3" together.
example code
CheckBox
.checkbox {
width: 900px;
padding: 3% 0%;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}
.checkbox label {
display: inline-block;
width: 64px;
height: 32px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 17px;
cursor: pointer;
position: relative;
transition: background-color .2s ease-in;
}
.checkbox label:after {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #eeeeee;
position: absolute;
left: 1px;
top: 1px;
transform: translateX(0px);
transition: transform .2s ease-in;
}
.checkbox [type="checkbox"]:checked + label {
background-color: khaki;
transition: background-color .2s ease-in;
}
.checkbox [type="checkbox"]:checked +label:after{
transform: translateX(30px);
transition: transform .2s ease-in;
}
.checkbox [type="checkbox"]{
display: none;
}
Let's take a look at our second special effect image
The code is as follows:
Title
.checkbox {
width: 900px;
padding: 3% 0px;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}
.checkbox label {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
overflow: hidden;
border: 1px solid #eeeeee;
background-color: #ffffff;
cursor: pointer;
}
.checkbox label:after {
content: "√";
position: absolute;
width: 28px;
height: 28px;
line-height: 26px;
background-color: khaki;
color: #ffffff;
left: 1px;
top: 1px;
text-align: center;
transform: translateY(-30px);
transition: transform .2s ease-out;
border-radius: 4px;
}
.checkbox [type="checkbox"]:checked + label:after {
transform: translateY(0px);
transition: transform .2s ease-in;
}
.checkbox [type="checkbox"]{
display: none;
}
Thank you for reading, the above is "how to achieve checkbox animation effects in CSS3" content, after the study of this article, I believe we have a deeper understanding of how to achieve checkbox animation effects in CSS3, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
