资讯专栏INFORMATION COLUMN

HTML+CSS3再加一点点JS做的一个小时钟

YancyYe / 1366人阅读

摘要:原文第一次发文章,比较激动。其实简单点的话直接在里面定好动画规则就行了时针秒旋转度,分针秒针以此类推。好了,以上代码我已经放在了上就这些了,献个丑,各位轻拍

  

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

第一次发文章,比较激动。
本码农长期浸淫于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: #ffffd;
}
/*分别设置各个刻度的位置和角度*/
.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: #ffffd;
    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生成的样式代码没地方安身啊。

好了,以上代码我已经放在了jsbin上:
http://output.jsbin.com/xeraxe

--

就这些了,献个丑,各位轻拍~ :)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49596.html

相关文章

  • SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

    摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

    elliott_hu 评论0 收藏0
  • 【二次元的CSS】—— 纯CSS3做的能换挡的电扇

    摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。 这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门:https://github.com/lancer07/css3_fan 效...

    Cruise_Chan 评论0 收藏0
  • 【二次元的CSS】—— 纯CSS3做的能换挡的电扇

    摘要:传送门效果是这样的结构小技巧就是,一开始就写了一组单选按钮来做开关的部分。有个地方需要优化,就是在换挡的时候,动画应该柔和些。 这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门:https://github.com/lancer07/css3_fan 效...

    big_cat 评论0 收藏0
  • 运营干货 - 开发 - Email - SJR

    摘要:毕老师运营这明显是广告,但为什么要在这里发过去一段时间,由于团队中的各种高富帅人生淫家都在全世界旅游,我们的开发进度比较慢当然之前也一直很慢,因为想要做一个慢产品。 Gradchef · 毕老师运营 这明显是广告,但为什么要在这里发? 过去一段时间,由于团队中的各种高富帅、人生淫家都在全世界旅游,我们的开发进度比较慢(当然之前也一直很慢,因为想要做一个慢产品)。但是,我们一直都在坚...

    PumpkinDylan 评论0 收藏0

发表评论

0条评论

YancyYe

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<