1，这个方法是通过input来关联label的样式
2，input要隐藏,label显示，点击label时input被选中，label添加动画改变样式
3，背景图的定位要正确
4，代码
css代码
<style type="text/css">
.app{
width: 100px;
height: 100px;
}
input{
display: none;
}
.app-aix{
/*position: relative;*/
display: block;
width: 100%;
height: 5rem;
}
/*背景图*/
.app-aix::before{
content: "";
display: block;
background: url(img/mbico.png) no-repeat;
background-size: 2.5rem auto;
width: 2.5rem;
height: 2.5rem;
}
/*动画定位背景图的位置*/ /*input未选中的状态*/
.app-box .app-aix::before {
background-position: 0 -2.5rem;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*选中input时的状态动画*/
.app-box :checked~.app-aix::before {
background-position: 0 -5rem;
-webkit-animation: collecting .3s linear 0s;
animation: collecting 0.4s linear 0s;
}
/*动画变化过程*/
@-webkit-keyframes collecting {
0% {
-webkit-transform: scale(0);
}
66% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes collecting {
0% {
transform: scale(0);
}
66% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
html代码
<div class="app">
<span class="app-box">
<input type="checkbox" name="" value="" id="proCollecter" />
<label for="proCollecter" class="app-aix"></label>
</span>
</div>
