rage65.github.io/m2.css at main · Rage65/rage65.github.io · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* LOGO BLOCK */
.m2 {
  position: relative;
  width: 20vmin;
  height: 20vmin;
  background: linear-gradient(135deg, #1e1e24 10%, #050505 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: gradient-shift 5s ease-in-out infinite;
  background-size: 200% 200%;
}
.m2 .logo {
  display: inline-block;
  font-size: 5vmin;
  color: white;
  background-image: linear-gradient(to right, #626262, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
}
.m2 .logo svg {
  margin-right: -1vmin;
  width: 5vmin;
  height: 5vmin;
}
.m2::before,
.m2::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  background:
    radial-gradient(circle at 0 0, hsl(27deg 93% 60%), transparent),
    radial-gradient(circle at 100% 0, #00a6ff, transparent),
    radial-gradient(circle at 0 100%, #ff0056, transparent),
    radial-gradient(circle at 100% 100%, #6500ff, transparent);
}
.m2::after {
  z-index: -1;
}
.m2::before {
  z-index: -2;
  filter: blur(2vmin);
  animation: blur-animation 3s ease-in-out alternate infinite;
}
@keyframes blur-animation {
  to {
    filter: blur(3vmin);
    transform: scale(1.05);
  }
}
/* LOGO BLOCK */
.m2 {
  position: relative;
  width: 20vmin;
  height: 20vmin;
  background: linear-gradient(135deg, #1e1e24 10%, #050505 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: gradient-shift 5s ease-in-out infinite;
  background-size: 200% 200%;
}
.m2 .logo {
  display: inline-block;
  font-size: 5vmin;
  color: white;
  background-image: linear-gradient(to right, #626262, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
}
.m2 .logo svg {
  margin-right: -1vmin;
  width: 5vmin;
  height: 5vmin;
}
.m2::before,
.m2::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  background:
    radial-gradient(circle at 0 0, hsl(27deg 93% 60%), transparent),
    radial-gradient(circle at 100% 0, #00a6ff, transparent),
    radial-gradient(circle at 0 100%, #ff0056, transparent),
    radial-gradient(circle at 100% 100%, #6500ff, transparent);
}
.m2::after {
  z-index: -1;
}
.m2::before {
  z-index: -2;
  filter: blur(2vmin);
  animation: blur-animation 3s ease-in-out alternate infinite;
}

/* ANIMATIONS */
@keyframes blur-animation {
  to {
    filter: blur(3vmin);
    transform: scale(1.05);
  }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes blur-animation {
  to {
    filter: blur(3vmin);
    transform: scale(1.05);
  }
}