要素は一つだけ、: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/