HTML+CSS3再加一点点JS做的一个小时钟_html/css_WEB-ITnose

php中文网

发布时间：2016-06-21 09:08:56

1173人浏览过

来源于php中文网

原创

原文：http://margox.me/css3clock.html

第一次发文章，比较激动。
本码农长期浸淫于dribbble等设计师网站，看到那些好看的设计作品就非常激动，但是无奈ps不精通，ai也早忘光了，只不过对前端略有研究，偶然间看到几个设计清爽的时钟，觉得用css实现起来应该也没什么难度，于是花了个把钟头琢磨了一个出来。

效果图

技术点

box-shadow 表盘的质感什么的全靠它了
nth-child(x) 用于表盘刻度的定位什么的
transform-origin 这个用来定位三个表针旋转的中心点
keyframes 表针动画效果

流程

先设计好DOM结构，代码如下：

<div class="clock-wrapper">    <div class="clock-base">        <div class="click-indicator">            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>        </div>        <div class="clock-hour"></div>        <div class="clock-minute"></div>        <div class="clock-second"></div>        <div class="clock-center"></div>    </div></div>

结构很简单，从样式名可以看出来每个元素的用处，中间那段空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里面定好动画规则就行了:时针3600秒旋转360度，分针秒针以此类推。
但是强迫症表示这样坚决不行，连正确的时间都不能指示的时钟肯定是山寨品，所以这里需要找CSS的好兄弟JavaScript借下力了：

立即学习“前端免费学习笔记（深入）”；

EasySite

零代码AI网站开发工具

下载

(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标签里面放点东西：