CSS3代码如何实现复选框动画特效

开发技术作者：iii 2024-04-19 14:50:01

本篇内容主要讲解“CSS3代码如何实现复选框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3代码�...

本篇内容主要讲解“CSS3代码如何实现复选框动画特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3代码如何实现复选框动画特效”吧!

实例代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>CheckBox</title>
   <style>
       .checkbox {
           width: 900px;
           padding: 3% 0%;
           margin: 50px auto;
           background-color: cornsilk;
           text-align: center;
       }</p> <p>        .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;
       }</p> <p>        .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;
       }</p> <p>        .checkbox [type="checkbox"]:checked + label {
           background-color: khaki;
           transition: background-color .2s ease-in;
       }</p> <p>        .checkbox [type="checkbox"]:checked +label:after{
           transform: translateX(30px);
           transition: transform .2s ease-in;
       }</p> <p>        .checkbox [type="checkbox"]{
           display: none;
       }
   </style>
</head>
<body>
<div>
   <input type="checkbox" id="checkbox-1">
   <label for="checkbox-1"></label></p> <p>    <input type="checkbox" id="checkbox-2">
   <label for="checkbox-2"></label></p> <p>    <input type="checkbox" id="checkbox-3">
   <label for="checkbox-3"></label>
</div></p> <p></body>
</html>

再来看我们的第二个特效图

CSS3代码如何实现复选框动画特效

代码如下:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .checkbox {
           width: 900px;
           padding: 3% 0px;
           margin: 50px auto;
           background-color: cornsilk;
           text-align: center;
       }</p> <p>        .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;
       }</p> <p>        .checkbox label:after {
           content: "&radic;";
           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;
       }</p> <p>        .checkbox [type="checkbox"]:checked + label:after {
           transform: translateY(0px);
           transition: transform .2s ease-in;
       }
       .checkbox [type="checkbox"]{
           display: none;
       }
   </style>
</head>
<body>
<div>
   <input type="checkbox" id="checkbox-1" checked="checked">
   <label for="checkbox-1"></label></p> <p>    <input type="checkbox" id="checkbox-2">
   <label for="checkbox-2"></label></p> <p>    <input type="checkbox" id="checkbox-3">
   <label for="checkbox-3"></label>
</div></p> <p></body>
</html>