您现在的位置是：首页 > jq记录jq记录

通过input来写点赞爱心颜色

2019-11-08【jq记录】人已围观

简介1，这个方法是通过input来关联label的样式2，input要隐藏,label显示，点击label时input被选中，label添加动画改变样式3，背景图的定位要正确4，代码css代码<style type="text/css">.app

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>