-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
89 lines (78 loc) · 3.02 KB
/
style.css
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
@keyframes scroll-bg {
0% {
transform: rotate(10deg) scale(1.2) translate3d(-5%, 5%, 30px);
}
50% {
transform: rotate(12deg) scale(1.4) translate3d(-5%, 5%, 130px);;
}
100% {
transform: rotate(10deg) scale(1.2) translate3d(-5%, 5%, 30px);;
}
}
body { background:#111;}
body {
--fg: #111;
overflow: hidden;
}
.bodyrun {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 150%;
height: 150%;
background:
0px 0 / 200px 200px no-repeat url('pb/demo-image/0.jpg'),
220px 20px / 200px 200px no-repeat url('pb/demo-image/1.jpg'),
440px 0px / 200px 200px no-repeat url('pb/demo-image/2.jpg'),
660px 20px / 200px 200px no-repeat url('pb/demo-image/3.jpg'),
880px 0px / 200px 200px no-repeat url('pb/demo-image/4.jpg'),
1100px 20px / 200px 200px no-repeat url('pb/demo-image/5.jpg'),
1310px 0px / 200px 200px no-repeat url('pb/demo-image/c.jpg'),
0px 220px / 200px 200px no-repeat url('pb/demo-image/6.jpg'),
220px 240px / 200px 200px no-repeat url('pb/demo-image/7.jpg'),
440px 220px / 200px 200px no-repeat url('pb/demo-image/8.jpg'),
660px 240px / 200px 200px no-repeat url('pb/demo-image/9.jpg'),
880px 220px / 200px 200px no-repeat url('pb/demo-image/a.jpg'),
1100px 240px / 200px 200px no-repeat url('pb/demo-image/b.jpg'),
1310px 220px / 200px 200px no-repeat url('pb/demo-image/d.jpg'),
0px 440px / 200px 200px no-repeat url('pb/demo-image/e.jpg'),
220px 460px / 200px 200px no-repeat url('pb/demo-image/c.jpg'),
440px 440px / 200px 200px no-repeat url('pb/demo-image/f.jpg'),
660px 460px / 200px 200px no-repeat url('pb/demo-image/g.jpg'),
880px 440px / 200px 200px no-repeat url('pb/demo-image/h.jpg'),
1100px 460px / 200px 200px no-repeat url('pb/demo-image/1.jpg'),
1310px 460px / 200px 200px no-repeat url('pb/demo-image/2.jpg'),
0px 660px / 200px 200px no-repeat url('pb/demo-image/0.jpg'),
220px 680px / 200px 200px no-repeat url('pb/demo-image/1.jpg'),
440px 660px / 200px 200px no-repeat url('pb/demo-image/2.jpg'),
660px 680px / 200px 200px no-repeat url('pb/demo-image/3.jpg'),
880px 660px / 200px 200px no-repeat url('pb/demo-image/4.jpg'),
1100px 680px / 200px 200px no-repeat url('pb/demo-image/5.jpg'),
1310px 660px / 200px 200px no-repeat url('pb/demo-image/c.jpg'),
var(--fg);
opacity:.5;
perspective: -900px;
animation: scroll-bg 120s linear infinite;
z-index: -1;
}
.welcome {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
a.button {
background: #fc3;
text-decoration: none;
border: 2px solid #0006;
border-top: 2px solid #fff6;
border-right: 2px solid #fff6;
padding: .5rem 1rem;
font-size: 24px;
color: #000;
font-weight: 700;
font-family: sans-serif;
text-transform: capitalize;
}