.digit {
  position: relative;
  width: 20px;
  height: 40px;
}
.digit .line {
  position: absolute;
  border-radius: 4px;
  box-shadow: 1px 1px 1px -1px rgba(0,0,0,0.3);
  transition: 0.2s all ease-in-out;
}
.line-1, .line-2, .line-5 {
  width: 20px;
  height: 4px;
}
.line-3, .line-4, .line-6, .line-7 {
  width: 4px;
  height: 20px;
}
.line-1 {
  top: 0; 
  left: 0;
  right: 0;
}
.line-2 {
  bottom: 0; 
  left: 0;
  right: 0;
}
.line-3 {
  left: 0;
}
.line-4 {
  right: 0;
}
.line-5 {
  top: 18px;
}
.line-6 {
  top: 20px;
  left: 0;
}
.line-7 {
  top: 20px;
  right: 0;
}
.digit-1 .line-2,
.digit-1 .line-3,
.digit-1 .line-5,
.digit-1 .line-1,
.digit-1 .line-6{
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-2 .line-3,
.digit-2 .line-7{
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-3 .line-3,
.digit-3 .line-6{
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-4 .line-1,
.digit-4 .line-2,
.digit-4 .line-6 {
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-5 .line-4,
.digit-5 .line-6 {
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-6 .line-4 {
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-7 .line-2,
.digit-7 .line-3,
.digit-7 .line-5,
.digit-7 .line-6{
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-9 .line-0,
.digit-9 .line-2,
.digit-9 .line-6 {
  opacity: 0.1;
  transform: rotateZ(360deg);
}
.digit-0 .line-5 {
  opacity: 0.1;
  transform: rotateZ(360deg);
}