效果图:

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

主要实现:
父组件:父组件接收一个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. #树状数组,离散#C 波动序列

    分析 设\(dp[i][j][0/1/2/3]\)表示前\(i\)个位置当前选的数为\(j\), 且选择的是第一行/第二行/第三行不下降/第三行不上升, 状态转移方程显然,用线段树或者树状数组维护一下 ...

  2. 一文弄懂java中的Queue家族

    目录 简介 Queue接口 Queue的分类 BlockingQueue Deque TransferQueue 总结 java中Queue家族简介 简介 java中Collection集合有三大家族 ...

  3. JDK14的新特性:JFR,JMC和JFR事件流

    目录 简介 JFR JMC 创建JFR 分析JFR JFR事件 JFR事件流 总结 JDK 14的新特性:JFR,JMC和JFR事件流 简介 Java Flight Recorder(JFR)是JVM ...

  4. OpenHarmony 社区运营报告(2023 年 10 月)

      ● 截至2023年10月,OpenHarmony社区共有51家共建单位,累计超过6200名贡献者产生24.2万多个PR,2.3万多个Star,6.1万多个Fork,59个SIG. ● OpenHa ...

  5. 80+产品正通过兼容性测试,OpenHarmony生态蓬勃发展

    4 月 25 日,开放原子开源基金会举办了 OpenAtom OpenHarmony(以下简称"OpenHarmony")技术日活动,OpenHarmony PMC 委员代表首次对 ...

  6. 一种基于DeltaE(CIE 1976)的找色算法

    // QuickFinder.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include <iostream> #define _ ...

  7. IDEA社区版,真香!

    IDEA(IntelliJ IDEA)是众多 Java 开发者的首选. 商业版的昂贵 IDEA 商业版(IntelliJ IDEA Ultimate)功能非常强大,能够满足 Java 开发的所有需求, ...

  8. 手把手教你基于gin从零搭建一个属于你自己的go项目(一)

    一.为什么写这个,适合什么人看 原因 因为自己想写点小玩意,本来是打算用egg.js来写服务端的,后来发现了个更好玩的midway,但是后来发现自己手上的服务器都是一核2g的小水管,用node有点难顶 ...

  9. docker 应用篇————dockerfile[十四]

    前言 简单介绍一下dockerfile. 正文 dockerfile就是docker image的构建文件. 然后来运行一下. 然后就产生了test:1.0 这个镜像. 然后启动一下你就发现了这个镜像 ...

  10. esp8266,arduino,网页显示dht11温湿度,控制继电器开关,局域网智能家居

    不说了,上代码,用arduino实现esp8266代码 #include <ESP8266WiFi.h> #include <WiFiClient.h> #include &l ...