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

蜗牛 互联网技术资讯 2022-04-25 38 0

这篇文章主要讲解了“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中如何实现复选框动画特效  css3 第1张

代码如下:

<!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>

感谢各位的阅读,以上就是“CSS3中如何实现复选框动画特效”的内容了,经过本文的学习后,相信大家对CSS3中如何实现复选框动画特效这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是蜗牛博客,小编将为大家推送更多相关知识点的文章,欢迎关注!

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

评论