这篇“CSS怎么利用计数器来实现长按点赞累积动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS怎么利用计数器来实现长按点赞累积动画”文章吧。
使用伪元素可以让 HTML 足够简洁和灵活,比如 HTML 如下
<button class="like">长按点赞</button>
用伪元素来实现提示文案,简单修饰一下
.like{ position: relative; } .like::after{ position: absolute; bottom: 100%; width: max-content; font-size: 2rem; font-style: italic; font-weight: bolder; background-image: linear-gradient(#FFCF02, #FF7352); -webkit-background-clip: text; -webkit-text-fill-color: transparent; content:'x10'; }
效果如下
然后,我们需要将这个提示在默认情况下隐藏起来,按下的时候才出现
.like::after{ /**/ transform: translateY(100%); opacity: 0; visibility: hidden; transition: .3s; } .like:active::after{ visibility: visible; opacity: 1; transform: translateY(0); }
这样很轻易就实现了一个按下就向上出现,抬起就还原的动画
但是,这样的动画看着不太舒服,那么,如何在抬起时改变回退动画呢?很简单,把向上出现的过渡动画设置在:active
上,并且添加一个延时,保证在元素在消失后,位移动画才还原
.like::after{ /**/ transform: translateY(100%); opacity: 0; visibility: hidden; transition: .3s .3s, 0s .6s transform; /*默认情况下没有transform*/ } .like:active::after{ visibility: visible; opacity: 1; transform: translateY(0); transition: .3s; }
效果如下
再来看看 CSS 数字变化。
在以前,数字的变化可能需要创建多个标签,然后改变位移来实现
<div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>...</span> </div>
这种方式需要创建多个标签,略微繁琐,也不易扩展,而且也没办法在伪元素中使用。
不过现在有更简洁的方式可以实现了,那就是 CSS @property。这是干什么的呢?简单来讲,可以自定义属性,在这个例子中,可以让数字像颜色一样进行过渡和动画,可能不太懂,直接看例子吧
我们先通过 CSS 变量将数字渲染到页面,这里需要借助计数器
.like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); }
为了方便测试,这里先将提示设置为可见,效果如下
如何让这个数字变化呢?可以用到 CSS 动画,将--t
变化到 999
@keyframes count { to { --t: 999 } } .like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); animation: count 100s steps(999) forwards; }
效果如下
然而并没有什么动画,其实是需要等100s
以后才会直接变成999
。然后最重要的一步来了,加上以下自定义属性
@property --t { syntax: '<integer>'; inherits: false; initial-value: 0; }
对的,仅仅添加这一小段 CSS,动画就出来了
是不是很神奇?可以这么理解,通过@property
定义后,这个变量--t
本身可以单独设置动画了,就像颜色变化一样。
然后,我们要实现只有按下的时候才会出现动画,可以默认将动画暂停,按下的时候才运行
.like::after{ /**/ --t:0; counter-reset: time var(--t); content: counter(time); animation: count 100s steps(999) forwards; animation-play-state: paused; /*默认暂停*/ } .like:active::after{ /**/ animation-play-state: running; /*按下运行*/ }
现在看看效果吧
提示在数字不断累积的过程中有一个阶段性的变化,如下
0~20
:鼓励!
20~50
:加油!!
50~
:太棒了!!!
那么,如何根据 CSS 变量来自动映射不同的提示呢?这里可以用到自定义计数器,比如,我们先自定义一个计数器
@counter-style 鼓励 { system: cyclic; symbols: '鼓励!'; range: 1 20; }
这样定义了一个名为“鼓励”的计数器,简单解释一下,system
,表示计算系统,这里为cyclic
,表示循环使用开发者提供的一套字符,字符由symbos
定义。然后symbos
表示计算符号,也就是具体展示的字符,这里指定为鼓励!
就行了。然后有个range
属性,表示计数器的范围,这里指定为1 20
。示意如下
这部分自定义计数器内容比较复杂,也比较新,有兴趣的可以参考张鑫旭的这篇文章:CSS @counter-style规则详细介绍
然后将这个自定义的计数器也通过伪元素渲染出来
.like::after{ content: counter(time) counter(time, 鼓励); }
下面看下效果
可以看到,当计数在1~20
范围内,渲染的是自定义字符“鼓励!”,当超过这个范围后,又变成了普通的数字,因此我们需要做一个“回退”处理,也就是在这个区间外的规则,CSS 计数器也提供了这样的能力,名为fallback
,实现就是这样
@counter-style 鼓励 { system: cyclic; symbols: '鼓励!'; range: 1 20; fallback: 加油 } @counter-style 加油 { system: cyclic; symbols: '加油!!'; range: 21 50; fallback: 太棒了 } @counter-style 太棒了 { system: cyclic; symbols: '太棒了!!!'; range: 51 infinite; }
相信应该比较好理解,当计数器range
超出时,就会按照fallback
的计数规则继续执行,可以无限嵌套,上面可以稍微简化一下,区间可以更加灵活一点,比如加油
的区间,进入到这个计数器,起点肯定已经超过了20,所以可以把起点也改为0
,简化后如下
@counter-style 鼓励 { system: cyclic; symbols: '鼓励!'; range: 0 20; fallback: 加油 } @counter-style 加油 { system: cyclic; symbols: '加油!!'; range: 0 50; /*进入到这个计数器,起点肯定已经超过了20*/ fallback: 太棒了 } @counter-style 太棒了 { system: cyclic; symbols: '太棒了!!!'; }
示意如下
效果
以上就是关于“CSS怎么利用计数器来实现长按点赞累积动画”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。