乐趣区

关于css:css小白必看用css3制作一款精美的在线时钟

jiezi

点击链接查看成果 https://ihope_top.gitee.io/my…

本文章已同步公布到公众号：百里青山

前言

前两天翻材料，找到了刚开始学习前端的时候学习的一个小案例，用 css 去画一个转动的表盘，也不晓得大家都写过没有，样子如下图所示

明天把这个小案例分享给大家，这个成果原案例是齐全用 css 实现的，因为表针转动都有法则可循，设置一个定时的动画就行，我为了简化代码量，并且能够获取以后的工夫，所以用 js 优化了一下，因为案例很小，所以就不必框架了，间接原生走起，因为这种简略的文章次要面向初学者，所以会说的具体一点

开发

初始化

第一步，找一个文件夹，建设 index.html，而后引入一个 style.css 并初始化一些款式

表盘制作

接下来咱们来制作表盘

面板

首先是面板局部，面板的 html 局部咱们就只用一个节点就够了，其余都用 css 来实现

  <div id="watch">
    <!-- 表盘 -->
    <div class="frame-face"></div>
  </div>

首先咱们给表盘一个根底款式来确定根本构造，再加点突变和暗影，制作一点立体感

#watch .frame-face {
  position: relative;
  width: 30em;
  height: 30em;
  margin: 2em auto;
  border-radius: 15em;
  background: -webkit-linear-gradient(top, #f9f9f9, #666);
  background: -moz-linear-gradient(top, #f9f9f9, #666);
  background: linear-gradient(top, #f9f9f9, #666);
  box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
}

之后咱们利用伪类元素，画一个径向突变，来营造一个层次感，让表盘的立体感更加强烈

#watch .frame-face:before {
  content: '';
  width: 29.4em;
  height: 29.4em;
  border-radius: 14.7em;
  position: absolute;
  top: .3em;
  left: .3em;
  background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
}

这样看着还是不太悦目，咱们再加一个伪类，制作变盘的主面板，通过暗影和突变造成的比照成果，让这个表盘看起来更实在

#watch .frame-face:after {
  content: '';
  width: 28em;
  height: 28em;
  border-radius: 14.2em;
  position: absolute;
  top: .9em;
  left: .9em;
  box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em;
  border: .1em solid rgba(0, 0, 0, .2);
  background: -webkit-linear-gradient(top, #fff, #ccc);
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: linear-gradient(top, #fff, #ccc);
}

刻度

表盘的四周有一个个的小刻度点，让咱们能够晓得当初的具体工夫，这里咱们给表盘设置 60 个刻度点，dom 节点咱们先写一个刻度点的容器，因为刻度点太多了，咱们稍后用 js 生成

    <!-- 刻度 -->
    <ul id="minute-marks"></ul>

来一个根底的款式

#minute-marks li {
  display: block;
  width: 0.2em;
  height: 0.6em;
  background: #929394;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.4em 0 0 -0.1em;
}

这里咱们通过 transform 调整每个刻度点的地位达成相应的成果，整点的刻度相比其余的要更突出，所以咱们要找出整点的刻度给他加一个突出的成果

window.onload = function () {
  // 生成刻度
  let markWrap = document.getElementById('minute-marks')

  for (let index = 0; index < 60; index++) {let markItem = document.createElement('li')
    markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";
    if (index % 5 == 0) {
      markItem.style.width = "0.3em";
      markItem.style.height = "1em";
    }
    markWrap.appendChild(markItem)
  }
}

这里咱们也能够酌情思考减少一些刻度的数字标识

<ul id="digits">
  <li>3</li>
  <li>6</li>
  <li>9</li>
  <li>12</li>
</ul>
#digits {
    width: 30em;
    height: 30em;
    border-radius: 15em;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -15em;
}
#digits li {
  font-size: 1.6em;
  display: block;
  width: 1.6em;
  height: 1.6em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1.6em;
  text-align: center;
  margin: -.8em 0 0 -.8em;
  font-weight: bold;
}

#digits li:nth-child(1) {transform: translate(7em, 0)
}

#digits li:nth-child(2) {transform: translate(0, 7em)
}

#digits li:nth-child(3) {transform: translate(-7em, 0)
}

#digits li:nth-child(4) {transform: translate(0, -7em)
}


这里咱们间接把指针转动的轴中心点也给做上

#digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
  border:.1em solid #c6c6c6;
  background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}

指针开发

接下来咱们进行表盘指针的开发

指针这里咱们给筹备三个 dom，别离是时针、分针和秒针

    <!-- 指针 -->
    <div class="hours-hand"></div>
    <div class="minutes-hand"></div>
    <div class="seconds-hand"></div>

时针开发

时针主体局部分为针柱和针尖，针柱方面就一个矩形，针尖能够用一个半圆和一个三角形组成

#watch .hours-hand {
    width:.8em;
    height:7em;
    border-radius:0 0 .9em .9em;
    background:#232425;
    position:absolute;
    bottom:50%; left:50%;
    margin:0 0 -.8em -.4em;
    box-shadow:#232425 0 0 2px;
    transform-origin:0.4em 6.2em;
    transform:rotate(-25deg);
}
#watch .hours-hand:before {
    content:'';
    background:inherit;
    width:1.8em;
    height:.8em;
    border-radius:0 0 .8em .8em;
    box-shadow:#232425 0 0 1px;
    position:absolute;
    top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
    content:'';
    width:0; height:0;
    border:.9em solid #232425;
    border-width:0 .9em 2.4em .9em;
    border-left-color:transparent;
    border-right-color:transparent;
    position:absolute;
    top:-3.1em; left:-.5em;
}

留神，这里咱们用了 transform-origin 这个属性，这个属性是用来设置 rotate 旋转基准点的，dom 旋转的时候将会以这个点进行旋转，如果不设置的话将会以本身核心点位核心旋转

分针开发

为了做一个辨别，咱们不同的指针给一个不同的款式，分针的话就一个矩形就行

#watch .minutes-hand {
    width:.8em;
    height:12.5em;
    border-radius:.5em;
    background:#343536;
    position:absolute;
    bottom:50%; left:50%;
    margin:0 0 -1.5em -.4em;
    box-shadow:#343536 0 0 2px;
    transform-origin:0.4em 11em;
}

秒针开发

秒针由三局部组成，别离是针尾的圆角矩形，一个和中心点重叠的圆形，还有一个很长的针尖，也能够通过圆角来做

/* 秒针 */
#watch .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
}
#watch .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}

让针转动起来

下面咱们开发了表盘和指针的根本款式，上面咱们就让针来转动起来，方才写 css 的时候，咱们曾经晓得了，指针的地位是通过 transform 转动了肯定的角度来实现的，所以咱们要实现指针的静止，只有定时去改变这个角度就能够了

  setInterval(function () {var time = new Date();
    var hour = time.getHours()
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var hournum;
    if (hour > 12) {hournum = ((hour - 12) + minute / 60) * 30;
    } else {hournum = (hour + minute / 60 * 100) * 30;
    }
    var minnum = (minute + second / 60) * 6 + second / 60;
    var sennum = second * 6;
    document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"
    document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"
    document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"
  }, 1000);

这样就功败垂成了

数字表开发

指针尽管也很直观，但总是没有数字直观精确，所以咱们能够再加一个数字小表盘。数字表盘更简略了，咱们获取一下以后的时分秒，定时刷新就好了，这里须要主机柱子表盘放的层级，不可盖住指针

    <!-- 数字表盘 -->
    <div class="digital-wrap">
      <ul class="digit-hours"></ul>
      <ul class="digit-minutes"></ul>
      <ul class="digit-seconds"></ul>
    </div>
#watch .digital-wrap {
  width:9em;
  height:3em;
  border:.1em solid #222;
  border-radius:.2em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  background:#4c4c4c;
  background:-webkit-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:-moz-linear-gradient(top, #4c4c4c, #0f0f0f);
  background:-ms-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:-o-linear-gradient(top, #4c4c4c,#0f0f0f);
  background:linear-gradient(to bottom, #4c4c4c,#0f0f0f);
}
#watch .digital-wrap ul {
  float:left;
  width:2.9em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
  text-align: center;
  line-height: 3em;
}
#watch .digital-wrap ul:last-child {width: 3em; border:none}
// 接到下面指针转动 js 前面
if(hour<10){hour="0"+parseInt(hour);
}
if(minute<10){minute="0"+parseInt(minute);
}
if(second<10){second="0"+parseInt(second);
}
document.getElementsByClassName("digit-hours")[0].innerHTML=hour;
document.getElementsByClassName("digit-minutes")[0].innerHTML=minute;
document.getElementsByClassName("digit-seconds")[0].innerHTML=second;

这样就功败垂成了。

退出移动版