1.scrolling_banner {
2 --banner-width: 300px;
3 --banner-height: 200px;
4 --banner-margin-bottom: 10px;
5 --banner-margin-right: 5px;
6 --banner-items: 6;
7 --banner-duration: 2s;
8}
9
10.container {
11 width: 100%;
12 overflow: hidden;
13}
14
15.scrolling_banner {
16 height: var(--banner-height);
17 width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
18 margin-bottom: calc(var(--banner-margin-bottom)/ 2);
19 font-size: 0
20}
21
22.scrolling_banner * {
23 margin-bottom: var(--banner-margin-bottom);
24 margin-right: var(--banner-margin-right);
25 height: var(--banner-height);
26 width: var(--banner-width);
27}
28
29.first {
30 -webkit-animation: bannermove var(--banner-duration) linear infinite;
31 -moz-animation: bannermove var(--banner-duration) linear infinite;
32 -ms-animation: bannermove var(--banner-duration) linear infinite;
33 -o-animation: bannermove var(--banner-duration) linear infinite;
34 animation: bannermove var(--banner-duration) linear infinite
35}
36
37@keyframes bannermove {
38 0% {
39 margin-left: 0
40 }
41 100% {
42 margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
43 }
44}