LoginSignup
9

More than 5 years have passed since last update.

CSSでデジタルタイマーを作ってみた。

Posted at

sample1.gif

要素は一つだけ、:before,:afterを使わないで作ってみた。

html

html

<div class="digital-timer"></div>


CSS

css

html,body{
  height: 100%;
}

.digital-timer{
  position: relative;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  margin: 0 0 0 20px;
  width: 10px;
  height: 10px;

  animation: 
    count0 1s 9s forwards,
    count1 1s 8s,
    count2 1s 7s,
    count3 1s 6s,
    count4 1s 5s,
    count5 1s 4s,
    count6 1s 3s,
    count7 1s 2s,
    count8 1s 1s,
    count9 1s 0s;
}

@keyframes count0{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count1{
  0%,100%{
    box-shadow:
       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count2{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,
  }
}

@keyframes count3{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count4{
  0%,100%{
    box-shadow:
       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count5{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count6{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}
@keyframes count7{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

      40px  10px 0 0 #000,
      40px  20px 0 0 #000,
      40px  30px 0 0 #000,
      40px  40px 0 0 #000,

      40px  60px 0 0 #000,
      40px  70px 0 0 #000,
      40px  80px 0 0 #000,
      40px  90px 0 0 #000;
  }
}

@keyframes count8{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

      -10px 60px 0 0 #000,
      -10px 70px 0 0 #000,
      -10px 80px 0 0 #000,
      -10px 90px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

@keyframes count9{
  0%,100%{
    background: #000;
    box-shadow:
      10px   0px 0 0 #000,
      20px   0px 0 0 #000,
      30px   0px 0 0 #000,

       0px  50px 0 0 #000,
      10px  50px 0 0 #000,
      20px  50px 0 0 #000,
      30px  50px 0 0 #000,

       0px 100px 0 0 #000,
      10px 100px 0 0 #000,
      20px 100px 0 0 #000,
      30px 100px 0 0 #000,

      -10px 10px 0 0 #000,
      -10px 20px 0 0 #000,
      -10px 30px 0 0 #000,
      -10px 40px 0 0 #000,

       40px 10px 0 0 #000,
       40px 20px 0 0 #000,
       40px 30px 0 0 #000,
       40px 40px 0 0 #000,

       40px 60px 0 0 #000,
       40px 70px 0 0 #000,
       40px 80px 0 0 #000,
       40px 90px 0 0 #000;
  }
}

box-shadowを使って数字のドット絵を作っているだけです。

カウントダウンその2

演出をすこし変えてみた。
下記のURLで確認できます。
http://jsfiddle.net/mjohvt7p/2/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9