JS+CSS实现滚动数字时钟效果(2)
注意：其中最上面的是CSS样式内容，大家可以在其中进行调整颜色字体等
<style>
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;}
</style>
JS代码主要就是控制动画的滚动效果，CSS用来控制数字的大小等内容。
本篇内容是黑区网络的原创，转载请留网址，感谢你对黑区网络的支持。