效果图:

原理分析:
这玩意就和垂直方向的轮播图差不多,只是把轮播的图换成数字

主要实现:
父组件:父组件接收一个curNum属性,这个属性代表当前需要显示的数字。它将这个数字传递给子组件AnimateNum,以便子组件可以正确地显示和滚动数字。
子组件一 (AnimateNum):这个组件接收父组件传递的curNum,并将其拆分为单个数字,然后为每个数字创建一个AnimateNumItem实例。每个实例都有其自己的延迟时间,以便它们可以依次停止滚动,从而创建一个动态的滚动效果。
子组件二 (AnimateNumItem):这个组件负责实现单个数字的滚动动画。它接收num、delay和size三个属性。num属性决定了数字的位置,delay属性决定了动画的延迟时间,size属性用于设置数字的大小。组件内部使用了CSS动画来实现数字的滚动效果。

CSS动画-数字轮盘滚动效果实现(组件封装,快速使用)的更多相关文章

  1. 使用css动画实现领积分效果

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  2. CSS动画:旋转卡片效果

    <!DOCTYPE html> <html> <head> <title>demo</title> </head> <bo ...

  3. 【css】纯css实现文字循环滚动效果

    不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...

  4. css动画之旋转翻牌效果

    1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置 例子如下: <style> .box { height: 300px; width: 300px; posit ...

  5. div+css关于overflow 动态滚动效果

    http://www.ablanxue.com/prone_2613_1.html 关于overflow:hidden不起作用的说明

  6. jQuery+CSS实现的图片滚动效果

    http://www.helloweba.com/view-blog-139.html

  7. JS+CSS实现数字滚动

    最近在实现一个显示RGB颜色数值的动画效果时,尝试使用了writing-mode(书写模式)及 text-orientation来实现文字的竖直方向的排列,并借助CSS的transition(过渡)来 ...

  8. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

  9. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  10. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

随机推荐

  1. Bootstrap实战 - 评论列表

    一.介绍 社交媒体网站盛行,人们常常会使用评论表达自己的观点,评论功能已然成为网站的一部分. 二.知识点 2.1 媒体对象 官方解释:这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内 ...

  2. 搭载KaihongOS的工业平板、机器人、无人机等产品通过3.2版本兼容性测评,持续繁荣OpenHarmony生态

    近日,搭载深圳开鸿数字产业发展有限公司(简称"深开鸿")KaihongOS 软件发行版的工业平板.机器人.无人机等商用产品均通过 OpenAtom OpenHarmony(以下简称 ...

  3. 解锁OpenHarmony技术日!年度盛会,即将揭幕!

    OpenHarmony技术日 即将揭幕!4月25日(星期一)09:00-18:00与你惊喜相约!     扫码直达   共建新技术.开拓新领域 OpenHarmony 工作委员会+7 家单位共同发起 ...

  4. 深究可见性,原子性,有序性的解决方案之volatile源码解析

    上节java内存模型(jmm)概念初探大致了解了由于cpu的快速发展,导致的越来越复杂的内存模型诞生,java内存模型相当于是底层内存模型的映射(实际并不是一一映射,但可以借鉴理解),也是衍生出并发三 ...

  5. 【FAQ】关于分析服务错误获取所选日期前一天事件数据的解决方法

    开发者通过华为分析服务下载所需的事件数据,这些数据可以导入到开发者自有的分析系统中,用于构建自定义报告或生成受众群体的个性化分析等,从而帮助制定切实有效的营销活动.数据导出支持按照用户属性和导出事件作 ...

  6. jenkins 持续集成和交付——一个构件小栗子前置(三)

    前言 下面介绍构建一个小栗子. 在此之前有个小前提,就是已经安装好了git 服务器,用的是gogs,详细请看外篇. 正文 插件安装 首先你要安装一个git插件. 装完git插件后,我们还得安装一些gi ...

  7. 一文读懂IoU,GIoU, DIoU, CIoU, Alpha-IoU (代码非常优雅)

    IoU就是就是我们说的交并比 Intersection over Union ,具体就是两个box的交集除以并集. 当我们计算我们的anchors 或者 proposals 与 ground trut ...

  8. ES6中对象新增了哪些扩展?

    一.属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 const baz = {foo:foo}// 等同于const baz = {foo} 方法也能够进行简写 const o = ...

  9. el-tree选中子级时默认选中父级(角色授权)

    问题1:选中子级时默认选中父级 <el-tree :data="menuData" show-checkbox default-expand-all node-key=&qu ...

  10. Borůvka MST算法

    当我认为最MST(最小生成树)已经没有什么学的了,才发现世界上还有个这个kruskal和prim结合的玩意 Borůvka 运用并查集的思想,先将每一个初始点集初始化为有且只有自己的点集,然后每一次合 ...