css3实现选择checkbox动画效果

2020-05-18 网页编程网 网页编程网

display: block;
width: 150px;
height: 150px;
border: 10px solid #000;
box-sizing: border-box;
border-radius:10px;
transition:border-color 0.2s linear;
}
/*
隐藏元素display:none;元素消失，无动画
visibility: hidden;占据页面空间，不能动画，能反隐藏
opacity:0;元素还在占据页面空间；透明度，无法动画
*/
.check-box input[type="checkbox"]{
position: absolute;/*脱离文档流，把位置腾开*/
left: 0;
top: 0;
visibility: hidden;
}
.check-box input[type="checkbox"]:checked + label{/*input被选中相邻兄弟选择label，相当于js中的$*/
border-color: #36ab19;
}
.check-box label::before,.check-box label::after{
position: absolute;/*不写你类的relative，则相对于widonw，absolute默认是inline-block*/

content: "";
width: 25px;
transform-origin: left top: 
background-color: #36ab19;
border-radius: 5px;
}
.check-box label::before{/*长边*/
left:70px;
top:5px;
height:0;
border:5px solid #678;
background-color: #36ab19;
box-shadow: 0 0 0 5px #678;
transform:rotate(-135deg);
transform: height 2s linear;
}
.check-box label::after{/*短边*/
left:14px;
top:86px;
height:0;
background-color: #36ab19;
transform: rotate(-45deg);
transform: height 2s linear;
}
.check-box input[type="checkbox"]:checked + label::before{
height: 150px;
transform: height .2s linear;
}
.check-box input[type="checkbox"]:checked + label::after{
height:60px;
transform: height .2s .2s linear;
}
</style>
<body>
   <div id="cb_area">
      <div class="check-box">
         <input id="checkBox" type="checkbox" name="">
         <label for="checkBox"></label>
      </div>
   </div>
</body>

阅读原文

阅读 3501

123 显示电脑版