使用css3怎么實(shí)現(xiàn)一個(gè)LED 數(shù)字時(shí)鐘？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)于2013年成立，先為興和等服務(wù)建站，興和等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為興和企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

<div class="digital digital_0">
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c3"></span>
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="r1"></span>
  <span class="r2"></span>
</div>

至于 digital_0 這個(gè)的作用，其實(shí)很簡(jiǎn)單，就是控制從 0 ~ 9 這十個(gè)數(shù)字的變化而存在的。

.digital_1 .c1,
.digital_1 .c2,
.digital_1 .c3,
.digital_1 .l1,
.digital_1 .l2,
.digital_2 .l1,
.digital_2 .r2,
.digital_3 .l1,
.digital_3 .l2,
.digital_4 .c1,
.digital_4 .c3,
.digital_4 .l2,
.digital_5 .l2,
.digital_5 .r1,
.digital_6 .r1,
.digital_7 .c2,
.digital_7 .c3,
.digital_7 .l1,
.digital_7 .l2,
.digital_9 .l2,
.digital_0 .c2 {
  animation: changeDigital 200ms 0ms 1 ease-in forwards;
}

這里使用了一個(gè) animation 動(dòng)畫(huà)，并且時(shí)間是 200ms，主要是為了讓某些部分消失的時(shí)候，有一個(gè)過(guò)渡效果。

@keyframes changeDigital {
  form {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

那么剩下來(lái)的就是最需要耐心的地方了，調(diào)整控制那 7 條線(xiàn)的位置，同時(shí)還要考慮每條線(xiàn)是帶有斜角的，而且還稍微有點(diǎn)圓弧的感覺(jué)。帶點(diǎn)圓弧的感覺(jué)那么直接使用 border-radius 就可以了，至于那個(gè)斜角的話(huà)，如果各位知道 CSS 中用邊框畫(huà)三角的方法，那么就應(yīng)該明白怎么做這個(gè)斜角了。

當(dāng)我們要畫(huà)三角的時(shí)候，width 和 height 都是為 0，然后用過(guò)控制 border-width 而得到最終的三角的大小，那么這里如果我們根據(jù)線(xiàn)條的位置，適當(dāng)選擇 width 和 height 有具體的值，是不是就有斜角的感覺(jué)了呢。

接著，需要注意橫著的中間那根線(xiàn)，也就是 .c2 這個(gè)元素，線(xiàn)條兩邊是三角突出的，可以實(shí)現(xiàn)的方式也很多，這里我選擇使用 :after 和 :before 相疊加。

最后就是對(duì)每個(gè)元素的位置做調(diào)整，控制好大小位置就可以了，因?yàn)槭鞘褂枚ㄎ坏姆绞絹?lái)操作，所以，調(diào)整起來(lái)還是很簡(jiǎn)單的。

.digital span {
  position: absolute;
  border-radius: 50vh;
  box-sizing: border-box;
}
.digital .c1,
.digital .c2,
.digital .c3 {
  height: 0;
  width: 26px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.digital .c1 {
  top: 0;
  left: 0;
  border-top: 4px solid currentColor;
}
.digital .c2 {
  top: 50%;
  left: 0;
  margin-top: -2px;
}
.digital .c2:before,
.digital .c2:after {
  content: "";
  height: 0;
  width: 24px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  box-sizing: border-box;
}
.digital .c2:before {
  position: absolute;
  top: 0;
  left: -3px;
  border-bottom: 2px solid currentColor;
}
.digital .c2:after {
  position: absolute;
  top: 2px;
  left: -3px;
  border-top: 2px solid currentColor;
}
.digital .c3 {
  bottom: 0;
  left: 0;
  border-bottom: 4px solid currentColor;
}
.digital .l1,
.digital .l2 {
  height: 21px;
  width: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 4px solid currentColor;
}
.digital .l1 {
  top: 1px;
  border-top-width: 4px;
}
.digital .l2 {
  top: 24px;
  border-bottom-width: 4px;
}
.digital .r1,
.digital .r2 {
  height: 21px;
  width: 0;
  right: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: 4px solid currentColor;
}
.digital .r1 {
  top: 1px;
  border-top-width: 4px;
}
.digital .r2 {
  top: 24px;
  border-bottom-width: 4px;
}

做完這些，剩下的就是簡(jiǎn)單的對(duì)外層元素做點(diǎn)優(yōu)化，比如稍微傾斜一點(diǎn)。

.digital {
  position: relative;
  width: 26px;
  height: 46px;
  margin-left: 10px;
  transform: skew(-6deg);
}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：使用css3怎么實(shí)現(xiàn)一個(gè)LED數(shù)字時(shí)鐘
URL網(wǎng)址：http://aaarwkj.com/article44/pjdpee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)