介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=gb2312",/比;
& lt; title> CSS3 + JS滚动数字时钟代码& lt;/title>
& lt; style>
身体{text-align:中心;background - color: # 0 e141b;颜色:,rgba(224,, 230,, 235,, 0.89);字体类型:,& # 39;Roboto 浓缩# 39;,,无衬线;粗细:,300;溢出:,隐藏;}
.column .colon{显示:inline-block; vertical-align:,,字体大小:,86 px;行高:,86 px;}
.column {-webkit-transition: -webkit-transform 300 ms;转型:,-webkit-transform 300 ms;转型:,transform 300 ms;转型:,transform 300 ms,, -webkit-transform 300 ms;}
.colon {-webkit-transition: -webkit-transform 300 ms;转型:,-webkit-transform 300 ms;转型:,transform 300 ms;转型:,transform 300 ms,, -webkit-transform 300 ms; -webkit-transform:, translateY (calc (50 vh 安康;43 px));变换:,translateY (calc (50 vh 安康;43 px));}
.colon:{后内容:& # 39;:& # 39;;}
.num {-webkit-transition: opacity 500 ms,, text-shadow 100 ms;转型:,opacity 500 ms,, text-shadow 100 ms;不透明度:,0.025;}
.num.visible{不透明度:1.0;文本阴影:,1 px 1 px 0 px # 336699;}
.num.close{不透明度:0.35;}
.num.far{不透明度:0.15;}
.num.distant{不透明度:0.1;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
& lt;/div>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
,& lt; div 类=皀um"在3 & lt;/div>
,& lt; div 类=皀um"在4 & lt;/div>
,& lt; div 类=皀um"在5 & lt;/div>
,& lt; div 类=皀um"在6 & lt;/div>
,& lt; div 类=皀um"在7 & lt;/div>
,& lt; div 类=皀um"在8 & lt;/div>
,& lt; div 类=皀um"在9 & lt;/div>
& lt;/div>
& lt; div 类=癱olon"祝辞& lt;/div>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
,& lt; div 类=皀um"在3 & lt;/div>
,& lt; div 类=皀um"在4 & lt;/div>
,& lt; div 类=皀um"在5 & lt;/div>
& lt;/div>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
,& lt; div 类=皀um"在3 & lt;/div>
,& lt; div 类=皀um"在4 & lt;/div>
,& lt; div 类=皀um"在5 & lt;/div>
,& lt; div 类=皀um"在6 & lt;/div>
,& lt; div 类=皀um"在7 & lt;/div>
,& lt; div 类=皀um"在8 & lt;/div>
,& lt; div 类=皀um"在9 & lt;/div>
& lt;/div>
& lt; div 类=癱olon"祝辞& lt;/div>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
,& lt; div 类=皀um"在3 & lt;/div>
,& lt; div 类=皀um"在4 & lt;/div>
,& lt; div 类=皀um"在5 & lt;/div>
& lt;/div>
& lt; div 类=癱olumn"祝辞
,& lt; div 类=皀um"在0 & lt;/div>
,& lt; div 类=皀um"在1 & lt;/div>
,& lt; div 类=皀um"在2 & lt;/div>
,& lt; div 类=皀um"在3 & lt;/div>
,& lt; div 类=皀um"在4 & lt;/div>
,& lt; div 类=皀um"在5 & lt;/div>
,& lt; div 类=皀um"在6 & lt;/div>
,& lt; div 类=皀um"在7 & lt;/div>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了JS + CSS怎么实现滚动数字时钟效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
用JS配合CSS样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果:
下面就是这个滚动时钟动画的全部代码:
