本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果，这个效果一般都是用在网页开场动画以及区域的时间显示中，非常好看，动画效果也很个性，我们先来看下运行后的效果：
下面就是这个滚动时钟动画的全部代码：
CSS3+JS滚动数字时钟代码-考高分网 body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;} .column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;} .column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;} .colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));} .colon:after{content: ':';} .num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;} .num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;} .num.close{opacity: 0.35;} .num.far{opacity: 0.15;} .num.distant{opacity: 0.1;} 0 1 2 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 0 1 2 3 4 5 6 7 8 9
注意：其中最上面的是CSS样式内容，大家可以在其中进行调整颜色字体等
body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;} .column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;} .column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;} .colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));} .colon:after{content: ':';} .num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;} .num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;} .num.close{opacity: 0.35;} .num.far{opacity: 0.15;} .num.distant{opacity: 0.1;}
JS代码主要就是控制动画的滚动效果，CSS用来控制数字的大小等内容。
本篇内容是考高分网的原创，转载请留网址，感谢你对考高分网的支持。
