JavaScript-mouseMove-Effect/main.css at master · Mostafa-Ben-Git/JavaScript-mouseMove-Effect · 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
:root {
  --green: #57f40e;
  --blue: rgb(0, 242, 250);
  --white: #ccc;
}
*,
*::after,
*::before {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
body {
  background: hsl(134, 40%, 35%);
  background-image: conic-gradient(
    from 0deg at 50% 50%,
    blue,
    purple,
    purple,
    blue
  );
  background-blend-mode: multiply;
  /* min-block-size: 100dvh; */
  height: 100vh;
  display: grid;
  place-items: center;
  color: var(--white);
  overflow: hidden;
}

pre {
  font-size: 2.5rem;
  font-weight: bold;
  background-color: black;
  padding: 2rem;
  border-radius: 2rem;
  position: relative;
  transform: perspective(6000px) rotateX(var(--rotateY)) rotateY(var(--rotateX));
  transform-style: preserve-3d;
}
.selector {
  color: var(--green);
}
.property {
  color: var(--blue);
}
.punctuation {
  color: orange;
}
pre > * {
  text-shadow: 0 0 10px currentColor;
}
pre::after,
pre::before {
  content: "";
  position: absolute;
  border-radius: inherit;
}
pre::after {
  inset: -1rem;
  transform: translateZ(-50px);
  background: linear-gradient(-45deg, var(--green), blue);
}
pre::before {
  inset: 0rem;
  transform: translateZ(-49px);
  opacity: 0.5;
  filter: blur(10px);
  background: black;
}