温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-06-25 16:00:52 来源:亿速云 阅读:110 作者:Leah 栏目:web开发

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>

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI