CSS3像素方块时钟特效代码下载


CSS3像素方块时钟特效代码下载
CSS3像素方块时钟特效代码下载以及像素方块时钟等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. HTML代码

<div class='wrapper'>
  <div class='clock'>
    <div class='clock__number hours'>
      <div class='digit digit__0'>
        <div class='pixel pixel_1'></div>
        <div class='pixel pixel_2'></div>
        <div class='pixel pixel_3'></div>
        <div class='pixel pixel_4'></div>
        <div class='pixel pixel_5'></div>
        <div class='pixel pixel_6'></div>
        <div class='pixel pixel_7'></div>
        <div class='pixel pixel_8'></div>
        <div class='pixel pixel_9'></div>
        <div class='pixel pixel_10'></div>
        <div class='pixel pixel_11'></div>
        <div class='pixel pixel_12'></div>
        <div class='pixel pixel_13'></div>
        <div class='pixel pixel_14'></div>
        <div class='pixel pixel_15'></div>
      </div>
      <div class='digit digit__0'>
        <div class='pixel pixel_1'></div>
        <div class='pixel pixel_2'></div>
        <div class='pixel pixel_3'></div>
        <div class='pixel pixel_4'></div>
        <div class='pixel pixel_5'></div>
        <div class='pixel pixel_6'></div>
        <div class='pixel pixel_7'></div>
        <div class='pixel pixel_8'></div>
        <div class='pixel pixel_9'></div>
        <div class='pixel pixel_10'></div>
        <div class='pixel pixel_11'></div>
        <div class='pixel pixel_12'></div>
        <div class='pixel pixel_13'></div>
        <div class='pixel pixel_14'></div>
        <div class='pixel pixel_15'></div>
      </div>
    </div>
    <div class='points'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='clock__number minutes'>
      <div class='digit digit__0'>
        <div class='pixel pixel_1'></div>
        <div class='pixel pixel_2'></div>
        <div class='pixel pixel_3'></div>
        <div class='pixel pixel_4'></div>
        <div class='pixel pixel_5'></div>
        <div class='pixel pixel_6'></div>
        <div class='pixel pixel_7'></div>
        <div class='pixel pixel_8'></div>
        <div class='pixel pixel_9'></div>
        <div class='pixel pixel_10'></div>
        <div class='pixel pixel_11'></div>
        <div class='pixel pixel_12'></div>
        <div class='pixel pixel_13'></div>
        <div class='pixel pixel_14'></div>
        <div class='pixel pixel_15'></div>
      </div>
      <div class='digit digit__0'>
        <div class='pixel pixel_1'></div>
        <div class='pixel pixel_2'></div>
        <div class='pixel pixel_3'></div>
        <div class='pixel pixel_4'></div>
        <div class='pixel pixel_5'></div>
        <div class='pixel pixel_6'></div>
        <div class='pixel pixel_7'></div>
        <div class='pixel pixel_8'></div>
        <div class='pixel pixel_9'></div>
        <div class='pixel pixel_10'></div>
        <div class='pixel pixel_11'></div>
        <div class='pixel pixel_12'></div>
        <div class='pixel pixel_13'></div>
        <div class='pixel pixel_14'></div>
        <div class='pixel pixel_15'></div>
      </div>
    </div>
  </div>
</div>
<script>
let digits = document.getElementsByClassName('digit'),
    pixels = document.getElementsByClassName('pixel');
function setTime() {
    let i,
        date = new Date(),
        seconds = date.getSeconds(),
        pixels_to_toggle = (seconds === 0)? 60 : seconds,
        time_numbers = ((date).toTimeString().substr(0,6)).split(':').join('');
    for (i = 0; i < time_numbers.length; i++) {
        digits[i].className = 'digit digit__' + time_numbers.charAt(i);
    }
    for (i = 0; i < pixels_to_toggle; i++) {
      pixels[i].classList.toggle('pixel__active', seconds !== 0);
    }
};
setTime();
setInterval(setTime, 500);
</script>
<div style="text-align:center;margin:0px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章