1011 lines
18 KiB
CSS
1011 lines
18 KiB
CSS
:host {
|
|
align-items: center;
|
|
background-color: #000;
|
|
display: flex;
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
font-size: 0.5vh;
|
|
margin: auto;
|
|
}
|
|
|
|
.barcode {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.barcode > div {
|
|
float: left;
|
|
margin-right: 2em;
|
|
transform-origin: 0 0;
|
|
}
|
|
.barcode > div:nth-child(1) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 0%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 3.4482758621%);
|
|
}
|
|
.barcode > div:nth-child(2) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 3.4482758621%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 6.8965517241%);
|
|
}
|
|
.barcode > div:nth-child(3) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 6.8965517241%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 10.3448275862%);
|
|
}
|
|
.barcode > div:nth-child(4) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 10.3448275862%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 13.7931034483%);
|
|
}
|
|
.barcode > div:nth-child(5) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 13.7931034483%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 17.2413793103%);
|
|
}
|
|
.barcode > div:nth-child(6) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 17.2413793103%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 20.6896551724%);
|
|
}
|
|
.barcode > div:nth-child(7) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 20.6896551724%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 24.1379310345%);
|
|
}
|
|
.barcode > div:nth-child(8) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 24.1379310345%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 27.5862068966%);
|
|
}
|
|
.barcode > div:nth-child(9) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 27.5862068966%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 31.0344827586%);
|
|
}
|
|
.barcode > div:nth-child(10) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 31.0344827586%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 34.4827586207%);
|
|
}
|
|
.barcode > div:nth-child(11) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 34.4827586207%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 37.9310344828%);
|
|
}
|
|
.barcode > div:nth-child(12) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 37.9310344828%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 41.3793103448%);
|
|
}
|
|
.barcode > div:nth-child(13) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 41.3793103448%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 44.8275862069%);
|
|
}
|
|
.barcode > div:nth-child(14) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 44.8275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 48.275862069%);
|
|
}
|
|
.barcode > div:nth-child(15) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 48.275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 51.724137931%);
|
|
}
|
|
.barcode > div:nth-child(16) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 51.724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 55.1724137931%);
|
|
}
|
|
.barcode > div:nth-child(17) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 55.1724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 58.6206896552%);
|
|
}
|
|
.barcode > div:nth-child(18) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 58.6206896552%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 62.0689655172%);
|
|
}
|
|
.barcode > div:nth-child(19) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 62.0689655172%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 65.5172413793%);
|
|
}
|
|
.barcode > div:nth-child(20) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 65.5172413793%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 68.9655172414%);
|
|
}
|
|
.barcode > div:nth-child(21) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 68.9655172414%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 72.4137931034%);
|
|
}
|
|
.barcode > div:nth-child(22) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 72.4137931034%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 75.8620689655%);
|
|
}
|
|
.barcode > div:nth-child(23) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 75.8620689655%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 79.3103448276%);
|
|
}
|
|
.barcode > div:nth-child(24) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 79.3103448276%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 82.7586206897%);
|
|
}
|
|
.barcode > div:nth-child(25) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 82.7586206897%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 86.2068965517%);
|
|
}
|
|
.barcode > div:nth-child(26) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 86.2068965517%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 89.6551724138%);
|
|
}
|
|
.barcode > div:nth-child(27) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 89.6551724138%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 93.1034482759%);
|
|
}
|
|
.barcode > div:nth-child(28) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 93.1034482759%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 96.5517241379%);
|
|
}
|
|
.barcode > div:nth-child(29) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 96.5517241379%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 100%);
|
|
}
|
|
.barcode > div:nth-child(30) {
|
|
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 100%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 103.4482758621%);
|
|
}
|
|
|
|
.barcode div:nth-child(1),
|
|
.barcode div:nth-child(2),
|
|
.barcode div:nth-child(15),
|
|
.barcode div:nth-child(16),
|
|
.barcode div:nth-child(29),
|
|
.barcode div:nth-child(30) {
|
|
height: 27em;
|
|
}
|
|
|
|
.barcode div:nth-child(1),
|
|
.barcode div:nth-child(2),
|
|
.barcode div:nth-child(3),
|
|
.barcode div:nth-child(5),
|
|
.barcode div:nth-child(8),
|
|
.barcode div:nth-child(10),
|
|
.barcode div:nth-child(12),
|
|
.barcode div:nth-child(13),
|
|
.barcode div:nth-child(15),
|
|
.barcode div:nth-child(16),
|
|
.barcode div:nth-child(18),
|
|
.barcode div:nth-child(19),
|
|
.barcode div:nth-child(22),
|
|
.barcode div:nth-child(25),
|
|
.barcode div:nth-child(27),
|
|
.barcode div:nth-child(28),
|
|
.barcode div:nth-child(29),
|
|
.barcode div:nth-child(30) {
|
|
width: 0.6em;
|
|
}
|
|
|
|
.barcode div:nth-child(3),
|
|
.barcode div:nth-child(4),
|
|
.barcode div:nth-child(5),
|
|
.barcode div:nth-child(6),
|
|
.barcode div:nth-child(7),
|
|
.barcode div:nth-child(8),
|
|
.barcode div:nth-child(9),
|
|
.barcode div:nth-child(10),
|
|
.barcode div:nth-child(11),
|
|
.barcode div:nth-child(12),
|
|
.barcode div:nth-child(13),
|
|
.barcode div:nth-child(14),
|
|
.barcode div:nth-child(17),
|
|
.barcode div:nth-child(18),
|
|
.barcode div:nth-child(19),
|
|
.barcode div:nth-child(20),
|
|
.barcode div:nth-child(21),
|
|
.barcode div:nth-child(22),
|
|
.barcode div:nth-child(23),
|
|
.barcode div:nth-child(24),
|
|
.barcode div:nth-child(25),
|
|
.barcode div:nth-child(26),
|
|
.barcode div:nth-child(27),
|
|
.barcode div:nth-child(28) {
|
|
height: 24em;
|
|
}
|
|
|
|
.barcode div:nth-child(6),
|
|
.barcode div:nth-child(7),
|
|
.barcode div:nth-child(9),
|
|
.barcode div:nth-child(11),
|
|
.barcode div:nth-child(14),
|
|
.barcode div:nth-child(23),
|
|
.barcode div:nth-child(24) {
|
|
width: 1.2em;
|
|
}
|
|
|
|
.barcode div:nth-child(17),
|
|
.barcode div:nth-child(20),
|
|
.barcode div:nth-child(21),
|
|
.barcode div:nth-child(26) {
|
|
width: 1.8em;
|
|
}
|
|
|
|
.barcode div:nth-child(4) {
|
|
width: 2.4em;
|
|
}
|
|
|
|
.barcode div:nth-child(1),
|
|
.barcode div:nth-child(2),
|
|
.barcode div:nth-child(3),
|
|
.barcode div:nth-child(4),
|
|
.barcode div:nth-child(6),
|
|
.barcode div:nth-child(7),
|
|
.barcode div:nth-child(8),
|
|
.barcode div:nth-child(11),
|
|
.barcode div:nth-child(13),
|
|
.barcode div:nth-child(14),
|
|
.barcode div:nth-child(15),
|
|
.barcode div:nth-child(16),
|
|
.barcode div:nth-child(18),
|
|
.barcode div:nth-child(19),
|
|
.barcode div:nth-child(22),
|
|
.barcode div:nth-child(24),
|
|
.barcode div:nth-child(25),
|
|
.barcode div:nth-child(29),
|
|
.barcode div:nth-child(30) {
|
|
margin-right: 0.6em;
|
|
}
|
|
|
|
.barcode div:nth-child(12),
|
|
.barcode div:nth-child(17),
|
|
.barcode div:nth-child(20),
|
|
.barcode div:nth-child(21),
|
|
.barcode div:nth-child(23),
|
|
.barcode div:nth-child(26),
|
|
.barcode div:nth-child(28) {
|
|
margin-right: 1.2em;
|
|
}
|
|
|
|
.barcode div:nth-child(5),
|
|
.barcode div:nth-child(9),
|
|
.barcode div:nth-child(10),
|
|
.barcode div:nth-child(27) {
|
|
margin-right: 1.8em;
|
|
}
|
|
|
|
@keyframes bar-1 {
|
|
0%, 16% {
|
|
transform: scaleY(0);
|
|
}
|
|
66% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
91% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(1) {
|
|
animation: bar-1 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-2 {
|
|
0%, 24% {
|
|
transform: scaleY(0);
|
|
}
|
|
61% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(2) {
|
|
animation: bar-2 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-3 {
|
|
0%, 18% {
|
|
transform: scaleY(0);
|
|
}
|
|
61% {
|
|
transform: scaleY(1);
|
|
}
|
|
72% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(3) {
|
|
animation: bar-3 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-4 {
|
|
0%, 3% {
|
|
transform: scaleY(0);
|
|
}
|
|
47% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(4) {
|
|
animation: bar-4 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-5 {
|
|
0%, 2% {
|
|
transform: scaleY(0);
|
|
}
|
|
67% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(5) {
|
|
animation: bar-5 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-6 {
|
|
0%, 14% {
|
|
transform: scaleY(0);
|
|
}
|
|
54% {
|
|
transform: scaleY(1);
|
|
}
|
|
74% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(6) {
|
|
animation: bar-6 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-7 {
|
|
0%, 9% {
|
|
transform: scaleY(0);
|
|
}
|
|
60% {
|
|
transform: scaleY(1);
|
|
}
|
|
76% {
|
|
opacity: 1;
|
|
}
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(7) {
|
|
animation: bar-7 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-8 {
|
|
0%, 27% {
|
|
transform: scaleY(0);
|
|
}
|
|
48% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(8) {
|
|
animation: bar-8 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-9 {
|
|
0%, 16% {
|
|
transform: scaleY(0);
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(9) {
|
|
animation: bar-9 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-10 {
|
|
0%, 9% {
|
|
transform: scaleY(0);
|
|
}
|
|
57% {
|
|
transform: scaleY(1);
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(10) {
|
|
animation: bar-10 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-11 {
|
|
0%, 14% {
|
|
transform: scaleY(0);
|
|
}
|
|
58% {
|
|
transform: scaleY(1);
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(11) {
|
|
animation: bar-11 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-12 {
|
|
0%, 15% {
|
|
transform: scaleY(0);
|
|
}
|
|
60% {
|
|
transform: scaleY(1);
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(12) {
|
|
animation: bar-12 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-13 {
|
|
0%, 8% {
|
|
transform: scaleY(0);
|
|
}
|
|
53% {
|
|
transform: scaleY(1);
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
}
|
|
91% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(13) {
|
|
animation: bar-13 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-14 {
|
|
0%, 17% {
|
|
transform: scaleY(0);
|
|
}
|
|
47% {
|
|
transform: scaleY(1);
|
|
}
|
|
76% {
|
|
opacity: 1;
|
|
}
|
|
91% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(14) {
|
|
animation: bar-14 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-15 {
|
|
0%, 26% {
|
|
transform: scaleY(0);
|
|
}
|
|
49% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(15) {
|
|
animation: bar-15 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-16 {
|
|
0%, 21% {
|
|
transform: scaleY(0);
|
|
}
|
|
55% {
|
|
transform: scaleY(1);
|
|
}
|
|
72% {
|
|
opacity: 1;
|
|
}
|
|
92% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(16) {
|
|
animation: bar-16 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-17 {
|
|
0%, 23% {
|
|
transform: scaleY(0);
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
}
|
|
77% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(17) {
|
|
animation: bar-17 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-18 {
|
|
0%, 21% {
|
|
transform: scaleY(0);
|
|
}
|
|
68% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
91% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(18) {
|
|
animation: bar-18 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-19 {
|
|
0%, 8% {
|
|
transform: scaleY(0);
|
|
}
|
|
68% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(19) {
|
|
animation: bar-19 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-20 {
|
|
0%, 2% {
|
|
transform: scaleY(0);
|
|
}
|
|
67% {
|
|
transform: scaleY(1);
|
|
}
|
|
79% {
|
|
opacity: 1;
|
|
}
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(20) {
|
|
animation: bar-20 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-21 {
|
|
0%, 16% {
|
|
transform: scaleY(0);
|
|
}
|
|
53% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(21) {
|
|
animation: bar-21 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-22 {
|
|
0%, 25% {
|
|
transform: scaleY(0);
|
|
}
|
|
56% {
|
|
transform: scaleY(1);
|
|
}
|
|
78% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(22) {
|
|
animation: bar-22 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-23 {
|
|
0%, 7% {
|
|
transform: scaleY(0);
|
|
}
|
|
61% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
92% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(23) {
|
|
animation: bar-23 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-24 {
|
|
0%, 1% {
|
|
transform: scaleY(0);
|
|
}
|
|
59% {
|
|
transform: scaleY(1);
|
|
}
|
|
81% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(24) {
|
|
animation: bar-24 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-25 {
|
|
0%, 19% {
|
|
transform: scaleY(0);
|
|
}
|
|
52% {
|
|
transform: scaleY(1);
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
}
|
|
93% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(25) {
|
|
animation: bar-25 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-26 {
|
|
0%, 5% {
|
|
transform: scaleY(0);
|
|
}
|
|
62% {
|
|
transform: scaleY(1);
|
|
}
|
|
78% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(26) {
|
|
animation: bar-26 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-27 {
|
|
0%, 13% {
|
|
transform: scaleY(0);
|
|
}
|
|
68% {
|
|
transform: scaleY(1);
|
|
}
|
|
79% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(27) {
|
|
animation: bar-27 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-28 {
|
|
0%, 11% {
|
|
transform: scaleY(0);
|
|
}
|
|
62% {
|
|
transform: scaleY(1);
|
|
}
|
|
77% {
|
|
opacity: 1;
|
|
}
|
|
91% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(28) {
|
|
animation: bar-28 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-29 {
|
|
0%, 3% {
|
|
transform: scaleY(0);
|
|
}
|
|
55% {
|
|
transform: scaleY(1);
|
|
}
|
|
73% {
|
|
opacity: 1;
|
|
}
|
|
88% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(29) {
|
|
animation: bar-29 5s ease-out infinite forwards;
|
|
}
|
|
|
|
@keyframes bar-30 {
|
|
0%, 13% {
|
|
transform: scaleY(0);
|
|
}
|
|
49% {
|
|
transform: scaleY(1);
|
|
}
|
|
79% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
99.5% {
|
|
transform: scaleY(1);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.barcode > div:nth-child(30) {
|
|
animation: bar-30 5s ease-out infinite forwards;
|
|
} |