Html 滚动价格动作的过渡动画。怎么用？

我在网上搜索了一下，只找到了

swift

的一个版本。联机时，返回搜索结果的唯一关键字是ScrollCounter。这种类型的动画是不是甚至可能是

CSS

HTML

如果有人能给我指出一个有用的资源或一个例子，我会在创建一个有用的例子后发回我的研究

看一看

和模糊的CSS和HTML

更新1

我已经找到了下面的计数器动画，但仍在试图找出如何将其实现为货币计数器，包括大于999.99的数字的可选逗号

虽然。。。在现实生活中，我会通过WebSocket更新这个值

const genNumber=（）=>{
document.querySelector（“div”）.style.setProperty（“--percent”，Math.random（））；
};
设置间隔（genNumber，3000）；
setTimeout（genNumber）
@属性--百分比{
语法：“”；
初始值：0；
继承：假；
}
@属性--temp{
语法：“”；
初始值：0；
继承：假；
}
@属性--v1{
语法：“”；
初始值：0；
继承：假；
}
@属性--v2{
语法：“”；
初始值：0；
继承：假；
}
div{
字体：800 40px单空格；
填充：2rem；
转换：--百分比1s；
--温度：计算值（var（--百分比）*100）；
--v1：最大值（var（--temp）-0.5,0）；
--v2：最大值（（var（--temp）-var（--v1））*100-0.5,0）；
计数器复位：v1 var（--v1）v2 var（--v2）；
}
div：：之前{
内容：计数器（v1）“.“计数器（v2，十进制前导零）”%”；
}
我修改了第一个答案，使其在语义上更加合理。一路上添加了评论和解释，因为我发现@Phillip Rollins的方法非常聪明



//用法
//对将用作微调器的div元素的引用
常量spinnerContainer=document.getElementById（'BTCUSD'）；
spinnerContainer.setAttribute（'class'，'spinnerContainer'）；
//初始构造
//包含带有类微调器col HTML元素的div的数组
常量喷丝头列=[]；
//该视图将包含以下可能的字符
常量spinnerCharacters=['$'，'0'，'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'，'，'，']；
//假定总长度为12位。。。
for（设i=0；i<12；i++）{
//创建匿名div
spinnerColumns[i]=document.createElement（'div'）；
//将匿名div类设置为微调器列
spinnerColumns[i].setAttribute（'class'，'SpinnerCol'）；
//对于数组spinnerCharacters中的每个字符。。。
for（让喷丝头字符组成喷丝头字符）{
//创建匿名div
const div=document.createElement（'div'）；
//…包含此字符
div.innerText=喷丝头字符；
//将匿名div类设置为微调器字符
div.setAttribute（'class'，'spinner char'）；
//将匿名div微调器字符附加到匿名div微调器列
喷丝头柱[i].追加（div）；
}
//将匿名div微调器列追加到微调器容器
spinnerContainer.append（spinnerColumns[i]）；
}
//渲染逻辑
//将微调器值设置为传入的数字
常量设置pinnervalue=（spinnerValue）=>{
//column.style.display=要初始化的“无”属性的数量
//等于传入的数字中的位数
for（设i=spinnerValue.length；i{
常量spinnerValue=Math.random（）*（99999-100000）+100000；
//更新价格
设置pinnervalue（formatCurrency.format（spinnerValue/100））；
}, 2000);
.spinner容器{
高度：75px；
显示器：flex；
溢出：隐藏；
}
斯宾纳上校{
框大小：边框框；
变换：平移（0,0）；
转换：转换800ms易入易出；
}
spinner char先生{
宽度：34px；
文本对齐：居中；
字体大小：50px；
高度：75px；
线高：75px；
}

BTCUSD
这是我想出来的，希望比你自己的答案更符合你的要求。只需创建所有可能的字符，然后使用CSS将正确的字符滚动到视图中


（（）=>{
//构建视图
常量字符=[“$”，“0”，“1”，“2”，“3”，“4”，“5”，“6”，“7”，“8”，“9”，“3”，“3]；
const formatter=新的Intl.NumberFormat（'en-US'{
风格：“货币”，
货币：美元
});
const container=document.createElement（“div”）；
setAttribute（“类”、“微调器容器”）；
常数cols=[]；
for（设x=0；x<12；x++）{
cols[x]=document.createElement（“div”）；
cols[x].setAttribute（“类”、“微调器列”）；
for（让char中的char）{
const div=document.createElement（“div”）；
div.innerText=char；
div.setAttribute（“类”、“微调器字符”）；
cols[x].追加（div）；
}
container.append（cols[x]）；
}
document.body.append（容器）；
//逻辑
常量设置值=（值）=>{
for（设x=value.length；x