css实现点赞效果

核心的方式是通过 一张背景图中position从左到右移动,
然后transition 中 steps控制帧率来实现效果。

steps:阶跃函数,参数一是把这次过渡分成几段。在这里相隔固定动画时间,采用一段图像,调整图片长宽,保持每张小图相同的间距,调整合适的steps值就可以实现动画的效果。

点赞的图完全可以自己用PS制作。

<div class="box"></div>
.box{
  width: 50px;
  height: 50px;
  background: url(./dianzan.png) no-repeat;
  background-position: left;
  background-size: cover; 
}

.boxactive {
  background-position: right;
  transition: background .6s steps(28); //根据图片有多少帧,比如我这张图片有29张小图,那就是填28
}	

boxactive这个属性可以点击之后动态增删,就可以达到效果,
图片:在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页