java argox_HTML+CSS3再加一点点JS做的一个小时钟
第一次发文章,比较激动。
本码农长期浸淫于Dribbble等设计师网站,看到那些好看的设计作品就非常激动,但是无奈PS不精通,AI也早忘光了,只不过对前端略有研究,偶然间看到几个设计清爽的时钟,觉得用CSS实现起来应该也没什么难度,于是花了个把钟头琢磨了一个出来。
效果图
技术点
box-shadow 表盘的质感什么的全靠它了
nth-child(x) 用于表盘刻度的定位什么的
transform-origin 这个用来定位三个表针旋转的中心点
keyframes 表针动画效果
流程
先设计好DOM结构,代码如下:
结构很简单,从样式名可以看出来每个元素的用处,中间那段空div自然就是表盘刻度了。
接下来是CSS代码
html,body{
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(#e7e7e7,#d7d7d7);
}
/*时钟容器*/
.clock-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
width: 250px;
height: 250px;
margin: auto;
padding: 5px;
background-image: linear-gradient(#f7f7f7,#e0e0e0);
border-radius: 50%;
box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);
}
/*表盘*/
.clock-base{
width: 250px;
height: 250px;
background-color: #eee;
border-radius: 50%;
box-shadow: 0 0 5px #eee;
}
/*表盘刻度容器*/
.click-indicator{
position: absolute;
z-index: 1;
top: 15px;
left: 15px;
width: 230px;
height: 230px;
}
/*表盘刻度*/
.click-indicator div{
position: absolute;
width: 2px;
height: 4px;
margin: 113px 114px;
background-color: #ddd;
}
/*分别设置各个刻度的位置和角度*/
.click-indicator div:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
.click-indicator div:nth-child(2) {
transform: rotate(60deg) translateY(-113px);
}
.click-indicator div:nth-child(3) {
transform: rotate(90deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(4) {
transform: rotate(120deg) translateY(-113px);
}
.click-indicator div:nth-child(5) {
transform: rotate(150deg) translateY(-113px);
}
.click-indicator div:nth-child(6) {
transform: rotate(180deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(7) {
transform: rotate(210deg) translateY(-113px);
}
.click-indicator div:nth-child(8) {
transform: rotate(240deg) translateY(-113px);
}
.click-indicator div:nth-child(9) {
transform: rotate(270deg) translateY(-113px);
background-color: #aaa;
}
.click-indicator div:nth-child(10) {
transform: rotate(300deg) translateY(-113px);
}
.click-indicator div:nth-child(11) {
transform: rotate(330deg) translateY(-113px);
}
.click-indicator div:nth-child(12) {
transform: rotate(360deg) translateY(-113px);
background-color: #c00;
}
/*时针*/
.clock-hour{
position: absolute;
z-index: 2;
top: 80px;
left: 128px;
width: 4px;
height: 65px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 50px;
transition: .5s;
-webkit-animation: rotate-hour 43200s linear infinite;
}
/*分针*/
.clock-minute{
position: absolute;
z-index: 3;
top: 60px;
left: 128px;
width: 4px;
height: 85px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 70px;
transition: .5s;
-webkit-animation: rotate-minute 3600s linear infinite;
}
/*秒针*/
.clock-second{
position: absolute;
z-index: 4;
top: 20px;
left: 129px;
width: 2px;
height: 130px;
background-color: #a00;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 1px 110px;
transition: .5s;
-webkit-animation: rotate-second 60s linear infinite;
}
.clock-second:after{
content: "";
display: block;
position: absolute;
left: -5px;
bottom: 14px;
width: 8px;
height: 8px;
background-color: #a00;
border: solid 2px #a00;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*表盘中央的原型区域*/
.clock-center{
position: absolute;
z-index: 1;
width: 150px;
height: 150px;
top: 55px;
left: 55px;
background-image: linear-gradient(#e3e3e3,#f7f7f7);
border-radius: 50%;
box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
content: "";
display: block;
width: 20px;
height: 20px;
margin: 65px;
background-color: #ddd;
border-radius: 50%;
}
样式文件就这些,不过这样的话三个指针都是在12点的,接下来需要让指针动起来。
其实简单点的话直接在css里面定好动画规则就行了:时针43200秒旋转360度,分针秒针以此类推。
但是强迫症表示这样坚决不行,连正确的时间都不能指示的时钟肯定是山寨品,所以这里需要找CSS的好兄弟JavaScript借下力了:
(function(){
//generate clock animations
var now = new Date(),
hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
secondDeg = now.getSeconds() / 60 * 360,
stylesDeg = [
"@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
].join("");
document.getElementById("clock-animations").innerHTML = stylesDeg;
})();
哦,千万别忘了在head标签里面放点东西:
不然JS生成的样式代码没地方安身啊。
--
就这些了,献个丑,各位轻拍~ :)
java argox_HTML+CSS3再加一点点JS做的一个小时钟相关推荐
- 突发灵感,看到某网站的搞笑图片挺多,做了一个小java,扫描抠了一些
2019独角兽企业重金招聘Python工程师标准>>> 突发灵感,看到某网站的搞笑图片挺多,做了一个小java,扫描抠了一些 这里分享一下 /*** 取得文件的后缀名* @Descr ...
- 黑白块游戏java代码_用java做的一个小游戏—黑白反斗棋(适合菜鸟)
用Java做的一个小游戏,黑白反斗棋,我玩过了5*5和10*10的.是学习之后做的,不是自己原始开发的. import java.awt.Color; import java.awt.FlowLayo ...
- 一个使用js做的一个PDF预览PDF标注(在线批注)工具
一个使用js做的一个PDF预览&PDF标注工具 核心主要使用pdf.js以及操作canvas 目前支持web端,windows端,mac端,可npm包引入项目 目前支持的功能有大文件预览.缩略 ...
- 用JS做了一个贪吃蛇小游戏,求顶贴..
这个周JS课程也快结束了,昨天下午琢磨着做一个小游戏,于是,这个小东东就这么诞生了,目前还存在两个小BUG,欢迎各位高手指正.... 实现的效果有: W,A,S,D,经及小键盘方向键控制方向; 头碰到 ...
- css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: 1 <div class="containe ...
- 花了两天时间用html+css+js做了一个网页版坦克大战游戏
大家好,我是孙叫兽,本期内容给大家分享如何用html+css+javaScript去做一个简易网页版坦克游戏. 目录 坦克游戏玩法及介绍 项目结构 源码地址: 坦克游戏玩法及介绍 我们先来看一下首页. ...
- java jpa saveall方法优化_关于JPA saveAll()的一个小坑
LBruce 你好: 其实想要解决 saveAll 批量插入慢的问题,我们需要两个步骤的操作.第一个步骤是非常简单的,因为 JPA 支持批量插入,所以,你可以设置一个批次执行多少条数据写入.例如,我们 ...
- 我用css3为好友胡歌的宝宝做了一个动画照片墙
软件人生风雨十年,仙剑一过去也有十年有余了,和胡歌认识那么久,今日喜闻好友胡歌生宝宝的消息,惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果. 目录 1. 实现思路 2. 墙体的实现 3. 选取 ...
- js做的一个猜数字小游戏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- HDU 5384 Danganronpa (2015年多校比赛第8场)
- cont::value_type相关的测试程序
- 描写火车站场景_描写火车站热闹场面的作文300字
- python特征工程插件_手把手教你用Python实现自动特征工程
- android studio 不生成buildconfig,Android Studio Update 0.4.0找不到buildConfig()
- java filedialog 打开文件_java 用文件对话框打开文件
- 云卓遥控器+DIY高清摄像机的方案(完美接入原系统)
- 方差、标准差(均方差),均方误差、均方根误差
- JAVA 中转义符的理解
- python中darks_YOLOv4: Darknet 如何于 Ubuntu 编译,及使用 Python 接口
- Sharepoint对List增删改操作
- python做什么模型_用python做模型
- html设置长宽高代码_(HTML)图像的宽高和边框设置!
- 研究生做实验时被炸伤致残!法院判决:驳回高校上诉,赔偿162万!
- umail for linux,umail for linux邮件服务器备份与还原
- win7系统 邮箱服务器搭建,win7搭建邮箱服务器
- 她力量系列一丨复旦大学黄萱菁教授:期待更多女性领会计算机科学的奥妙
- 美团2023届笔试题解
- java 读写 wps xlsx 文件
- 关于IOS中uni.downloadFile下载的图片显示不出来的解决方法