電子時鐘效果 ( CSS 偽元素的應用 )

這是單純利用 CSS 做出來的時鐘,大量的應用了 CSS 裡頭的偽元素 ( ::before 和 ::after ),配合簡單的 JS 所作出的效果,以下就來介紹是如何做出來的。

電子時鐘效果範例

偽元素簡介

首先介紹一下偽元素這個東西,為什麼稱呼這東西叫做偽元素呢?簡單來說,偽元素並不存在於標準的 HTML 元素當中,而是跟隨在每個元素裡頭,一前一後共有兩個,分別是::befor::after,當我們在 CSS 裡頭寫出a::beforea::after的時候,就等同於在這個 a 元素的前後加上了兩個假的元素,我們就可以更靈活的去針對 a 元素做變化。( 可以看看下面這張圖和對應的程式碼就比較清楚,搭配 範例檔案

.a{
  width:100px;
  height:50px;
  background:red;
  position:relative;
  color:#fff;
}
.a::before{   /* 藍色的 before 區塊 */
  content:'before';
  width:50px;
  height:50px;
  background:blue;
  display:block;
  position:absolute;
  top:0;
  left:-50px;
}
.a::after{    /* 綠色的 after 區塊 */
  content:'after';
  width:50px;
  height:50px;
  background:green;
  display:block;
  position:absolute;
  top:0;
  right:-50px;
}

CSS Clock

比較需要注意的,偽元素一定要加上content:'';的屬性,這個屬性是讓我們可以在偽元素直接填入純文字內容,也可以使用像 alert 一樣的換行語法,這個值基本上都可以為空,但你也可以使用它搭配 HTML5 的 data attributes,就能做出更多的互動變化,也因為偽元素原本是 inline 的屬性,我們若要讓它俱有長寬,就要將其改為 block 或 inline-block。此外,如果要精准控制偽元素的位置,可以把本體的 position 設為 relative,偽元素的 position 設為 absolute,就可以由 top、left、right、bottom 控制位置。

邊框概念

了解了基本的偽元素之後,就可以做出這個時鐘效果了嗎?當然是不行呦~我們還必須要先了解邊框 ( border ) 的概念,如果今天一個正方形的長寬都是 0,但四個邊都有 10px 的寬度,出來的樣子就會像下圖這樣 ( 搭配 範例檔案 )

.b{
  width:0;
  height:0;
  border-width:20px;
  border-style:solid;
  border-color:red blue green yellow; /* 上右下左,順時針方向四個邊 */
}

CSS Clock

我們如果把邊框的底色設為透明,就可以輕鬆地做出三角形的效果,當然如果搭配 CSS3 的旋轉或變形,就可以做出更多形狀的變化。( 搭配 範例檔案 )

.c{
  width:0;
  height:0;
  border-width:20px;
  border-style:solid;
  border-color:rgba(0,0,0,0) rgba(0,0,0,1); /* 上下、左右 */
}

CSS Clock

搭配本體的元素,就能夠做出箭頭。( 搭配 範例檔案 )

.d{
  width:100px;
  height:50px;
  background:rgba(255,200,0,1);
  position:relative;
}
.d::after{
  content:'';
  width:0;
  height:0;
  border-width:25px;
  border-style:solid;
  position:absolute;
  top:0;
  right:-50px;
  border-color:rgba(255,200,0,0) rgba(255,200,0,0) rgba(255,200,0,0) rgba(255,200,0,1);
  /* 上右下三個邊的邊框顏色是透明的 */
}

CSS Clock

組合時鐘

基本知識都都了解了之後,我們只要把各個箭頭 ( 總共七個 ) 組成八的形狀,就可以做出像液晶電子數字的 8 。 ( 搭配 範例檔案 )

.clock{
  margin:20px;
}
.show-time{
  position:absolute;
}
.clock span {
  display: block;
  width: 6px;
  height: 20px;
  background: #000;
  position: relative;
  -webkit-transition:.3s;   /* 改變數字的時候有淡入淡出的效果 */
  transition:.3s;
  box-shadow:-1px 1px 5px rgba(0,0,0,.6);   /* 讓液晶數字有陰影,有浮起來的效果 */
}
.clock span.s1,.clock span.s4,.clock span.s7 {     /* 水平的黑色條 */
  width: 20px;
  height: 6px;
}
.clock span::before, .clock span::after {    /* 偽元素的基本樣式 */
  content:'';
  position: absolute;
  border: 3px solid rgba(0, 0, 0, 0);
  width:0;
  height:0;
}

.clock span.s1 {   /* 水平黑色條 */
}
.clock span.s2,.clock span.s5 {   /* 垂直黑色條 */
  margin-top:1px;
  margin-left:-7px;
}
.clock span.s3,.clock span.s6 {   /* 垂直黑色條 */
  margin-top:-20px;
  margin-left:21px;
}
.clock span.s4,.clock span.s7  {   /* 水平黑色條 */
  margin-top:1px;
}

/* 左方三角 */
.clock span.s1::before, .clock span.s4::before, .clock span.s7::before {
  top:0px;
  left: -6px;
  border-right-color:#000;
}
/* 右方三角 */    
.clock span.s1::after, .clock span.s4::after, .clock span.s7::after {
  right: -6px;
  border-left-color:#000;
}
/* 上方三角 */
.clock span.s2::before, .clock span.s3::before, .clock span.s5::before, .clock span.s6::before {
  top: -6px;
  border-bottom-color: #000;
}
/* 下方三角 */
.clock span.s2::after, .clock span.s3::after, .clock span.s5::after, .clock span.s6::after {
  bottom: -6px;
  border-top-color: #000;
}

CSS Clock

接著只要在針對不同的數字,讓不同的箭頭消失,就可以做出 0~9 的數字效果。

.clock-1 span.s1,.clock-1 span.s2,.clock-1 span.s4,.clock-1 span.s5,.clock-1 span.s7{
  opacity:0;
}
.clock-2 span.s2,.clock-2 span.s6{
  opacity:0;
}
.clock-3 span.s2,.clock-3 span.s5{
  opacity:0;
}
.clock-4 span.s1,.clock-4 span.s5,.clock-4 span.s7{
  opacity:0;
}
.clock-5 span.s3,.clock-5 span.s5{
  opacity:0;
}
.clock-6 span.s3{
  opacity:0;
}
.clock-7 span.s2,.clock-7 span.s4,.clock-7 span.s5,.clock-7 span.s7{
  opacity:0;
}
.clock-8{
}
.clock-9 span.s5{
  opacity:0;
}
.clock-0 span.s4{
  opacity:0;
}

小結

會做這些效果之後,只需要再利用 JS 抓取電腦時間,加上其他的 CSS 排版,就能做出非常擬真的電子時鐘囉!最後再看一次範例:電子時鐘效果範例 ( 使用 EZoApp,點選 preview 可以預覽 )

有興趣瞧瞧其他新文章嗎?