本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果:
下面就是这个滚动时钟动画的全部代码:
CSS3+JS滚动数字时钟代码-脚本之家 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 <script> "use strict"; var size = 86; var columns = Array.from(document.getElementsByClassName("column")); var d = undefined, c = undefined; var classList = ["visible", "close", "far", "far", "distant", "distant"]; var use24HourClock = true; function padClock(p, n) { return p + ("0" + n).slice(-2); } function getClock() { d = new Date(); return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, ""); } function getClass(n, i2) { return classList.find(function (class_, classIndex) { return i2 - classIndex === n || i2 + classIndex === n; }) || ""; } var loop = setInterval(function () { c = getClock(); columns.forEach(function (ele, i) { var n = +c[i]; var offset = -n * size; ele.style.transform = "translateY(calc(50vh + " + offset + "px - " + size / 2 + "px))"; Array.from(ele.children).forEach(function (ele2, i2) { ele2.className = "num " + getClass(n, i2); }); }); }, 200 + Math.E * 10); </script>
注意:其中最上面的是CSS样式内容,大家可以在其中进行调整颜色字体等
JS代码主要就是控制动画的滚动效果,CSS用来控制数字的大小等内容。
http://m.bbyears.com/wangyezhizuo/144470.html
推荐访问: