JS CSS实现滚动数字时钟效果

本篇内容我们用射流研究…配合钢性铸铁样式表来实现一个滚动时钟的动画效果，这个效果一般都是用在网页开场动画以及区域的时间显示中，非常好看，动画效果也很个性，我们先来看下运行后的效果：

下面就是这个滚动时钟动画的全部代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleCSS3 JS滚动数字时钟代码-我们/title style body { text-align : center；背景-颜色： # 0e 141bcolor: rgba(224，230，235，0.89)；font-family : ' Roboto condented '，无衬线；字体粗细： 300；飞越：隐藏；}.列，冒号{ display : inline-block；垂直对齐： 顶部；font-size : 86px线高： 86px}.列{-web kit-transit :-web kit-transit 300 ms；transit :-网络套件-transit 300 ms；过渡：变压器300毫秒；transition:转换300毫秒，-web套件-转换300毫秒；}.冒号{-web kit-transit :-web kit-transit 300 ms；transit :-网络套件-transit 300 ms；过渡：变压器300毫秒；transition:转换300毫秒，-web套件-转换300毫秒；-web套件-transform : translateY(calc(50vh-43px))；transform : translateY(calc(50vh-43px))；} .冒号：在{content: ': '之后；}.num {-web套件-transit :不透明度500毫秒，文本-阴影100毫秒：不透明度500毫秒，文本阴影100毫秒；opacity: 0.025 }。计算器可见{ opa city 3360 1.0文本-阴影： 1px 1px 0px # 336699} .计算器关闭{ opa city 3360 0.35} .计算器远{ opa city 3360 0.15} .计算器距离{ opa city 3360 0.1}/style/headdydiv class=' column ' div class=' num ' 0/div class=' num ' 1/div class=' num ' 2/div/div class=' column ' div class=' num ' 0/div class=' num ' 1/div class=' num ' 3/div class=' num ' 4/div class=' num ' 5/div class=' num ' 6/div class=' num ' 7/div class=' num ' 8 var size=86 var columns=array。来自(文档。getelementsbyclassname(' column ')；var d=未定义，c=未定义；var classList=['可见','近','远','远','远'];var use24HourClock=true函数padClock(p，n) {return p ('0' n).切片(-2);}函数getClock(){ d=新日期()；返回[使用24资源锁？d . gethours():d。gethours()% 12 | | 12，d.getMinutes()，d.getSeconds()].减少(pad时钟' ')；}函数getClass(n，i2) {return classList.find(函数(class_，class index){ return I2-class index===n | | I2 class index===n；}) || '';} var loop=setInterval(function(){ c=getClock()；columns.forEach(function (ele，I){ var n=c[I]；var offset=-n * size；埃勒。风格。transform=' translateY(calc(50vh ' offset ' px-' size/2 ' px))'；Array.from(ele.children).forEach(函数(E1 2，I2){ E1 2。类名=' num ' getClass(n，I2)；});});},200数学e * 10)；/脚本/正文/html注意：其中最上面的是半铸钢钢性铸铁(铸造半钢)样式内容，大家可以在其中进行调整颜色字体等

样式正文{ text-align : center背景-颜色： # 0e 141bcolor: rgba(224，230，235，0.89)；font-family : ' Roboto condented '，无衬线；字体粗细： 300；飞越：隐藏；}.列，冒号{ display : inline-block；垂直对齐： 顶部；font-size : 86px线高： 86px}.列{-web kit-transit :-web kit-transit 300 ms；transit :-网络套件-transit 300 ms；过渡：变压器300毫秒；transition:转换300毫秒，-web套件-转换300毫秒；}.冒号{-web kit-transit :-web kit-transit 300 ms；transit :-网络套件-transit 300 ms；过渡：变压器300毫秒；transition:转换300毫秒，-web套件-转换300毫秒；-web套件-transform : translateY(calc(50vh-43px))；transform : translateY(calc(50vh-43px))；} .冒号：在{content: ': '之后；}.num {-web套件-transit :不透明度500毫秒，文本-阴影100毫秒：不透明度500毫秒，文本阴影100毫秒；opacity: 0.025 }。计算器可见{ opa city 3360 1.0文本-阴影： 1px 1px 0px # 336699} .计算器关闭{ opa city 3360 0.35} .计算器远{ opa city 3360 0.15} .计算器距离{ opa city 3360 0.1}/styleJS代码主要就是控制动画的滚动效果，CSS用来控制数字的大小等内容。

本篇内容是我们的原创，转载请留网址，感谢你对我们的支持。