BisonBytes2023/background_imgs.css at main · Mikito-Coder/BisonBytes2023 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* all from
https://www.html.am/html-codes/marquees/css-marquee.cfm */

.background_imgs{
    top: 20;

    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 99999999999;

}
.background_imgs img{
    top: 20;

    width: 100px;
    height: 100px;
    position: absolute;

}
.clouds_img img{
    position: absolute;
    width: 100px;
    z-index: -1;
}
/*
 */
/*  */


/* .marquee {
    height: 25px;
    width: 420px;

    overflow: hidden;
  } */

  /* .marquee img {
    display: block;
    width: 100%;

    overflow: hidden;

    animation: marquee 5s linear infinite;
  }


  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  } */


  .marquee-outer {
    height: 100px;
    overflow: hidden;
    position: relative;
    color: orange;
   }
   .marquee-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    /* Apply animation to this element */
    -moz-animation: scroll-left 5s linear infinite;
    -webkit-animation: scroll-left 5s linear infinite;
    animation: scroll-left 5s linear infinite;
   }
   /* Move it (define the animation) */
   @-moz-keyframes scroll-left {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
   }
   @-webkit-keyframes scroll-left {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
   }
   @keyframes scroll-left {
    0%   {
    -moz-transform: translateX(100%); /* Browser bug fix */
    -webkit-transform: translateX(100%); /* Browser bug fix */
    transform: translateX(100%);
    }
    100% {
    -moz-transform: translateX(-100%); /* Browser bug fix */
    -webkit-transform: translateX(-100%); /* Browser bug fix */
    transform: translateX(-100%);
    }
   }