< 返回技术文档列表

CSS3中怎么实现复选框动画特效

发布时间:2021-07-21 17:23:58⊙投诉举报

CSS3中怎么实现复选框动画特效,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

实例代码

代码如下:


<!DOCTYPE html>
<html lang="en">
<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 class="checkbox">
   <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 lang="en">
<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 class="checkbox">
   <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>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注血鸟云行业资讯频道,感谢您对血鸟云的支持。


/template/Home/Zkeys/PC/Static