效果图:

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

主要实现:
父组件:父组件接收一个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. Arm架构下麒麟操作系统安装配置Mariadb数据库

    1.安装配置JDK (1)检查机器是否已安装JDK 执行 java -version命令查看机器是否安装JDK,一般麒麟操作系统默认安装openjdk 1.8. (2)安装指定版本JDK 如果麒麟操作 ...

  2. 使用OHOS SDK构建zstd

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone https://github.com/facebook/zstd.git 进入源码 ...

  3. 密码学系列之:IDEA

    密码学系列之:IDEA 目录 简介 IDEA简介 IDEA原理 IDEA子密钥的生成 简介 IDEA的全称是International Data Encryption Algorithm,也叫做国际加 ...

  4. centerOS网卡ens33没有inet报错failed tostart LSB: Bring up/down

    没有inet 错误 cd /etc/sysconfig/network-scripts/ vi ifcfg-ens33 添加  HWADDR=<mac_of_ens33> service ...

  5. mybatis复习(一)

    原始连接数据库步骤: 1.导入JDBC驱动包 Class.forName("com.mysql.jdbc.Driver"); 2.获取连接对象(连接目标数据库) Connectio ...

  6. 国产开源数据库OpenGauss的安装运行

    步骤一:OpenGauss 的安装 环境 OS:openEuler 20.03 64bit with ARM 架构:arm64 部署:单机 安装过程 1.环境配置 安装依赖包: yum install ...

  7. Kalman滤波器的原理与实现

    Kalman滤波器的原理与实现 卡尔曼滤波器(Kalman Filter)是一个十分强大滤波器,虽然叫做滤波器,卡尔曼滤波器其实可以起到到两个作用,即预测与更新,这与我们在其运行时所关注的环节有关.当 ...

  8. HDC2021技术分论坛:鸿蒙智联设备开发,这五大法宝你应该拥有

    作者:zhaowenguang,dinglu, 华为高级工程师 Huawei LiteOS是轻量级的开源物联网操作系统.智能硬件使能平台,可广泛应用于智能家居.穿戴式.车联网.制造业等领域,使物联网终 ...

  9. 重新点亮shell————awk数组[十四]

    前言 简单介绍一下awk的数组. 正文 数组的定义: 数组的遍历: 删除数组: 例子: 例子2: 结 下一节awk函数.

  10. CF1933D Turtle Tenacity: Continual Mods

    思路: 此题其实很简单,不要被邪恶的出题人迷惑了双眼. 此题判断有解一共有两种情况. 通过题意可以知道将原数组排序后如果 \(b_{1} \ne b_{2}\),那么最后的结果一定 \(\ne 0\) ...