css小白必看笨触，用css3制作一款精美的在線時鐘

點擊鏈接查看效果https://ihope_top.gitee.io/my-demo/demo/1/

本文章已同步發(fā)布到公眾號：百里青山

前言

前兩天翻資料，找到了剛開始學習前端的時候?qū)W習的一個小案例，用css去畫一個轉(zhuǎn)動的表盤闭专，也不知道大家都寫過沒有，樣子如下圖所示

預覽圖.gif

今天把這個小案例分享給大家旧烧，這個效果原案例是完全用css實現(xiàn)的影钉，因為表針轉(zhuǎn)動都有規(guī)律可循，設置一個定時的動畫就行掘剪，我為了簡化代碼量平委，并且可以獲取當前的時間，所以用js優(yōu)化了一下夺谁，因為案例很小肆汹，所以就不用框架了，直接原生走起予权，由于這種簡單的文章主要面向初學者昂勉，所以會說的詳細一點

開發(fā)

初始化

第一步，找一個文件夾扫腺，建立 index.html 岗照， 然后引入一個 style.css 并初始化一些樣式

58ec22b09ef3da53f20efb7113b05e5.png

表盤制作

接下來我們來制作表盤

面板

首先是面板部分，面板的html部分我們就只用一個節(jié)點就夠了，其他都用css來完成

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

首先我們給表盤一個基礎樣式來確定基本結(jié)構(gòu)攒至，再加點漸變和陰影厚者，制造一點立體感

#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);
}
2.png

之后我們利用偽類元素，畫一個徑向漸變迫吐，來營造一個層次感库菲，讓表盤的立體感更加強烈

#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%);
}
3.png

這樣看著還是不太順眼，我們再加一個偽類志膀，制作變盤的主面板熙宇，通過陰影和漸變造成的對比效果，讓這個表盤看起來更真實

#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);
}
4.png

刻度

表盤的周圍有一個個的小刻度點溉浙，讓我們可以知道現(xiàn)在的具體時間烫止，這里我們給表盤設置60個刻度點，dom節(jié)點我們先寫一個刻度點的容器戳稽，因為刻度點太多了馆蠕，我們稍后用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 調(diào)整每個刻度點的位置達成相應的效果，整點的刻度相比其他的要更突出惊奇，所以我們要找出整點的刻度給他加一個突出的效果

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)
  }
}
5.png

這里我們也可以酌情考慮增加一些刻度的數(shù)字標識

<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)
}
6.png

這里我們直接把指針轉(zhuǎn)動的軸中心點也給做上

#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%);
}
7.png

指針開發(fā)

接下來我們進行表盤指針的開發(fā)

指針這里我們給準備三個dom互躬，分別是時針、分針和秒針

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

時針開發(fā)

時針主體部分分為針柱和針尖颂郎，針柱方面就一個矩形吼渡，針尖可以用一個半圓和一個三角形組成

#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;
}
8.png

注意，這里我們用了 transform-origin 這個屬性祖秒，這個屬性是用來設置rotate旋轉(zhuǎn)基準點的，dom旋轉(zhuǎn)的時候?qū)赃@個點進行旋轉(zhuǎn)舟奠，如果不設置的話將會以自身中心點位中心旋轉(zhuǎn)

分針開發(fā)

為了做一個區(qū)分竭缝，我們不同的指針給一個不同的樣式，分針的話就一個矩形就行

#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;
}
9.png

秒針開發(fā)

秒針由三部分組成沼瘫，分別是針尾的圓角矩形抬纸，一個和中心點重疊的圓形，還有一個很長的針尖耿戚，也可以通過圓角來做

/* 秒針 */
#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;
}
10.png

讓針轉(zhuǎn)動起來

上面我們開發(fā)了表盤和指針的基本樣式湿故，下面我們就讓針來轉(zhuǎn)動起來，剛才寫css的時候膜蛔，我們已經(jīng)知道了坛猪，指針的位置是通過transform轉(zhuǎn)動了一定的角度來實現(xiàn)的，所以我們要實現(xiàn)指針的運動皂股，只要定時去改動這個角度就可以了

  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);

這樣就大功告成了

11.gif

數(shù)字表開發(fā)

指針雖然也很直觀墅茉，但總是沒有數(shù)字直觀準確，所以我們可以再加一個數(shù)字小表盤。數(shù)字表盤更簡單了就斤，我們獲取一下當前的時分秒悍募，定時刷新就好了，這里需要主機柱子表盤放的層級洋机，不可蓋住指針

    <!-- 數(shù)字表盤 -->
    <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 }

// 接到上面指針轉(zhuǎn)動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;
12.png

這樣就大功告成了坠宴。

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市绷旗，隨后出現(xiàn)的幾起案子喜鼓，更是在濱河造成了極大的恐慌，老刑警劉巖刁标，帶你破解...
    沈念sama閱讀 210,978評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件颠通，死亡現(xiàn)場離奇詭異，居然都是意外死亡膀懈，警方通過查閱死者的電腦和手機顿锰，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來启搂，“玉大人硼控，你說我怎么就攤上這事「於模” “怎么了牢撼？”我有些...
    開封第一講書人閱讀 156,623評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長疑苫。 經(jīng)常有香客問我熏版，道長，這世上最難降的妖魔是什么捍掺？ 我笑而不...
    開封第一講書人閱讀 56,324評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任撼短，我火速辦了婚禮，結(jié)果婚禮上挺勿，老公的妹妹穿的比我還像新娘曲横。我一直安慰自己，他們只是感情好不瓶，可當我...
    茶點故事閱讀 65,390評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布禾嫉。 她就那樣靜靜地躺著，像睡著了一般蚊丐。 火紅的嫁衣襯著肌膚如雪熙参。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,741評論 1贊 289
  • 城市分裂傳說
    那天麦备，我揣著相機與錄音尊惰，去河邊找鬼讲竿。 笑死，一個胖子當著我的面吹牛弄屡，可吹牛的內(nèi)容都是我干的题禀。 我是一名探鬼主播，決...
    沈念sama閱讀 38,892評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼膀捷，長吁一口氣：“原來是場噩夢啊……” “哼迈嘹！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起全庸，我...
    開封第一講書人閱讀 37,655評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤秀仲，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后壶笼，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體神僵，經(jīng)...
    沈念sama閱讀 44,104評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年覆劈，在試婚紗的時候發(fā)現(xiàn)自己被綠了保礼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,569評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡责语，死狀恐怖炮障，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情坤候，我是刑警寧澤胁赢，帶...
    沈念sama閱讀 34,254評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站白筹，受9級特大地震影響智末，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜徒河，卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一系馆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧虚青，春花似錦它呀、人聲如沸螺男。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽下隧。三九已至奢人，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間淆院，已是汗流浹背何乎。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人支救。 一個月前我還...
    沈念sama閱讀 46,260評論 2贊 360
  • 代替公主和親
    正文 我出身青樓抢野，卻偏偏與公主長得像，于是被迫代替她去往敵國和親各墨。 傳聞我的和親對象是個殘疾皇子指孤，可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2贊 348