html在div中数字时钟,在JS+CSS中如何实现滚动数字时钟
本篇文章教给大家用JS代码配合CSS样式来实现滚动时钟的动画效果,一起来学习下。
本篇内容我们用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
'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);
注意:其中最上面的是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用来控制数字的大小等内容。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
html在div中数字时钟,在JS+CSS中如何实现滚动数字时钟相关推荐
- yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
- JS+CSS打造随屏幕滚动的quick快速导航代码
代码内容: <html> <head> <title>JS+CSS打造随屏幕滚动的quick快速导航代码_网页代码站(www.webdm.cn)</title ...
- php中框是什么代码,css中box是什么文件
css中box是指CSS盒子模型,即Box Model:在CSS中,"box model"这一术语是用来设计和布局时使用:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包 ...
- 精灵图在现代前端中到底有用没,css中显示和隐藏竟有两种不同方式
css基础篇(第七篇) 回顾 在上一讲中我们基本上学习了css中定位的几种方式,包括定位在实际工作中常用的口诀等,除此之外还学习了margin:0 auto 水平居中的效果.未来常用的z-index等 ...
- html+js+css打造的高仿苹果时钟组件
给心爱的BdTab插件添加上两款苹果手机的时钟,放在浏览器主页,简直不要太好了啊, 可随意拖动.#创业# html+js+css打造的高仿 <div style="width: 100 ...
- vue 验证是否数字类型_vue.js如何判断输入的是不是数字
vue.js判断输入是否为数字的方法:首先,创建前端样本文件:然后在vue中使用正则表达式"var num reg =/" 本教程的操作环境:windows7系统,2.0版,此方法 ...
- vue 验证是否数字类型_vue.js如何判断输入是否是数字
vue.js判断输入是否是数字的方法:使用正则表达式来判断输入的值是否是数字,代码为[this.$message({type: 'warning',message: '请输入数字 ',duration ...
- VScode中html怎么引入js,vscode中如何使用typescript,如何自动编译成js文件
使用vscode创建一个typescript程序 1:介绍 typescript是一个跨平台的编程语言,专门用于前端的语言,是由微软开发,在2013年6月正式发布,它是javascript的超集,扩展 ...
- css中indent是什么意思,css中text-indent用法及与padding的区别详解
语法: text-indent : length 参数: length : 百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值.请参阅长度单位 说明: 检索或设置对象中的文本的缩进. 在被另一 ...
- html5中margin是什么意思,css中margin是什么意思,margin作用是什么?
一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...
最新文章
- pytest第二版 进阶学习
- Postgresql数据库主从备份教程
- mlp神经网络_白天鹅黑天鹅灰天鹅?卷积神经网络帮你搞定识别
- Lua基础---lua字符串库函数详解,实例及正则表达式
- 北京环球影城上线王者荣耀英雄主题活动
- MySQL定时备份数据库方案(全库备份)
- 几个互联网巨头的社区团购还不收手?
- 让用VS2013编写的程序在XP中顺利运行
- 全国计算机等级考试三级数据库技术考试大纲(2018 年版)
- iOS音频掌柜-- AVAudioSession
- 安卓如何修改dns服务器地址,安卓手机怎么修改DNS?安卓手机修改DNS服务器图文详情介绍[多图]...
- 第七章产品生命周期管理
- java poi 将公文套红 并 电子签章
- 摇摇开门:支付宝的痼疾、做产品与谈恋爱
- (已更新)王者荣耀改名神器助手微信小程序源码下载
- C++提高案例之-演讲比赛流程管理系统
- Android中电话拦截器案例
- 【荐读】百度教我的产品方法论
- 实战nodejs写网络爬虫
- ip和端口号的正则表达式