ACCC

最新推荐文章于 2023-07-12 10:30:26 发布

其实还很远

最新推荐文章于 2023-07-12 10:30:26 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： PC端

本文链接：https://blog.youkuaiyun.com/running_shuai/article/details/75057878

PC端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的文本动画库animate-text，通过几行代码即可为页面添加流畅的文本动画效果，支持数字动画及自定义动画时长等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2017-04-05 https://juejin.im/entry/58e11c5644d904006d16f4e5
文本动画, 几行代码页面效果瞬间就提升了
animate-text
       安装方法 npm install animate-text --save
                             下载项目中的dist/animate-text.min.js, 然后用script标签插入到你的项目中, 如下
这种方式可以通过window.AnimateText访问

使用方法
   import AnimateText from 'animate-text'
   new AnimateText('.text', {
               time: 1000, // 动画时长
               isNumber: true, // 是否渲染为数字动画
              startNumber: 0, // 渲染为数字动画时动画的开始数字
              changeCount: 32, // 数字动画数字变化次数
              onAnimated: function () {console.log('动画结束')} // 动画结束事件回调
        })
    接收两个参数    可以是选择器或者dom节点对象(请保证这个节点内只有文本而没有其它节点)
   实例对象方法说明
// 实例化
var animateText = new AnimateText('.text')
// 实例化对象后对象提供play方法重新播放动画
// 接受参数作为动画时间
// 不传递参数则使用实例化的时间
animateText.play(1000)

2017-04-06纯 CSS 实现网站常用的五角星评分和分数展示交互效果
https://juejin.im/entry/58dda1b2da2f60005fbc200b
纯css驱动的实现方式完成评分和展示分数的功能