欢迎关注我的公众号：前端大侦探在某app中，如果长按like，就会出现这样一个花哨的动画，下面的动画由两个组成部分，其中随机表情的实现可以参考coco的这篇文章。使用transitions实现短视频applikeanimation类似，这里不再赘述。我们在这里要实现的是这种千变万化的数字动画。在下面的演示中仔细观察。有如下交互：当鼠标按下时，有向上出现的动画，抬起时，会慢慢消失。数字不断累加，达到指定值时提示文字自动变化。鼓励！>加油！！>太棒了！！！让我们一起看看如何实现它。1、鼠标上下交互使用伪元素可以让HTML足够简洁灵活，例如HTML如下长按点赞使用伪元素实现提示复制，简单修改一下。喜欢{位置：相对;}.like::after{位置：绝对;底部：100%；宽度：最大内容；字体大小：2rem；字体样式：斜体；字体粗细：更粗；背景图像：线性渐变（#FFCF02，#FF7352）；-webkit-背景剪辑：文本；:'x10';}效果如下然后，我们需要默认隐藏这个提示，只有按下时才会出现。like::after{/**/变换：translateY(100%);不透明度：0；可见性：隐藏；过渡：.3s；}。像：活动::之后{可见性：可见；不透明度：1；Revertedanimation但是，这个动画看起来不舒服，那么解除时如何改变它改变回退动画怎么样？很简单，将向上出现的过渡动画设置为：active，并添加一个延迟，保证元素消失后恢复位移动画。这个动画技巧可以参考我之前的文章CSS实现按钮点击动画的有效套路。like::after{/**/transform:translateY(100%);不透明度：0；可见性：隐藏；转换：.3s.3s,0s.6s转换；/*默认没有转换*/}.like:active::after{visibility:visible;不透明度：1；转换：翻译Y（0）；transition:.3s;}效果如下2、数字不断累加，我们看一下css数字变化。两篇文章都提到：还在使用定时器？CSS还可以实现电子钟和动画合成技巧！CSS实现动态倒计时效果以往数字的变化可能需要创建多个标签，然后改变位移来实现12345...
这种方法需要创建多个标签，有点繁琐，不易扩展，在伪元素中使用not方法。不过现在有一种更简洁的实现方式，那就是CSS@property。这个是来做什么的？简单来说就是可以自定义属性。在此示例中，您可以使数字像颜色一样过渡和动画。你可能不明白。让我们看看这个例子。让我们先通过CSS变量将数字呈现到页面上。这里我们需要用到计数器。有兴趣的可以参考这篇文章：Tips:HowtousethecontentattributetodisplayCSSvarvariablevalues。像::之后{/**/--t:0;计数器复位：时间变量（--t）；content:counter(time);}为了方便测试，先设置提示可见，效果如下如何让这个数字发生变化？CSS动画可用于将--t更改为999@keyframescount{to{--t:999}}.like::after{/**/--t:0;计数器复位：时间变量（--t）；内容：计数器（时间）；animation:count100ssteps(999)forwards;}效果如下，但是没有动画。其实需要等待100s才会直接变成999。那么最重要的一步来了，添加如下自定义属性@property--t{syntax:'';继承：假的；initial-value:0;}是的，加上这一小段CSS，动画就出来了是不是很神奇？可以理解为通过@property定义后，这个变量--t本身就可以单独动画了，就像颜色变化一样。然后，我们需要意识到动画只有在按下时才会出现。您可以默认暂停动画并在按下时运行它。像::之后{/**/--t:0;计数器重置：时间变量（--t）；内容：计数器（时间）；动画：向前数100步（999）；动画播放状态：暂停；/*默认暂停*/}.like:active::after{/**/animation-play-state:running;/*Presstorun*/}现在来看看效果3.提醒的阶段变化在数字不断累积的过程中有一个阶段变化，如下0~20：鼓励！20~50：加油！！50~：太棒了！！！那么，如何根据CSS变量自动映射不同的提示呢？这里可以使用自定义计数器，比如我们先自定义一个计数器@counter-styleEncourage{system:cyclic;符号：'鼓励！';range:120;}这样就定义了一个名为“encouragement”的计数器。简单说明一下，system就是计算系统，这里的循环就是循环使用开发者提供的一组字符，字符用符号定义。然后symbols代表计算符号，也就是具体显示的字符，这里指定为鼓励！正好。然后是range属性，表示计数器的范围，这里指定为120。说明这个海关柜台的内容比较复杂，也比较新。有兴趣的可以参考张新旭的这篇文章：CSS@counter-stylerules详细介绍然后通过伪元素渲染这个自定义计数器。like::after{content:counter(time)counter(time,encouragement);}看下面的效果可以看到，当count在1~20范围内时，自定义字符“encouragement!”被渲染，超过这个范围，又变成了一个普通的数字，所以我们需要做一个“fallback”的过程，就是这个范围之外的规则，CSScounters也提供了这样的能力，叫做fallback，实现就像这样@counter-styleEncourage{system:cyclic;符号：'鼓励！';范围：120；回退：来吧}@counter-style来吧{系统：循环；符号：'来吧！！';范围：2150；后备：真棒}@counter-styleawesome{系统：循环；符号：'太棒了！！！';range:51infinite;}相信应该更容易理解。当计数器范围超出时，会按照fallback的计数规则继续执行，可以无限嵌套。上面可以稍微简化一下，interval可以更灵活一些，比如加油Interval，进入这个计数器的时候，起点肯定已经超过20了，所以起点也可以改成0，简化如下@counter-style鼓励{系统：循环；符号：'鼓励！';范围：020；回退：来吧}@counter-style来吧{系统：循环；符号：'来吧！！';范围：050；/*进入这个计数器，起点必须超过20*/fallback:Great}@counter-styleGreat{system:cyclic;符号：'太棒了！！！';}表示如下，这样就得到了文章开头的demo效果。完整代码可以访问：CSSaddnumanimation(runjs.work)RunJS，前端代码创作分享在线。4.总结以上就是全部内容，不赖的动画技巧，你学会了吗？总结一下mousedown和up的过渡动画通常是相反的，但是你可以通过在按下时设置transition来改变抬起的动画Transition或者动画计数器允许CSS变量渲染在伪元素上。animation-play-state可以实现按下动画开始，抬起动画暂停的效果。自定义计数器可以渲染指定计数范围内的某些字符，实现计数阶段的变化。您可以使用fallback回滚并跳转到另一个计数器。说到兼容性，Chrome91+目前还不适合外用，不过大家可以提前了解一下。当然，自定义计数器的潜力远不止于此，还会有更多的挖掘和应用被开展。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
