2016
02
03

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

關鍵字:電子時鐘CSS偽元素

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

CSS Clock

.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;
}

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

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

CSS Clock

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

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

CSS Clock

.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);
/* 上右下三個邊的邊框顏色是透明的 */
}

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

CSS Clock

.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;
}
接著只要在針對不同的數字,讓不同的箭頭消失,就可以做出 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 排版,就能做出非常擬真的電子時鐘囉!

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所