css实现点赞效果

最新推荐文章于 2024-07-07 15:51:10 发布

alt琳

最新推荐文章于 2024-07-07 15:51:10 发布

阅读量4.3k

点赞数 8

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_37162688/article/details/102525188

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

核心的方式是通过一张背景图中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
}