Card by kennyotsu

1/* RIP Uiverse points, welcome Creator points! */
2
3.card-id567 {
4  width: 190px;
5  height: 190px;
6  background: rgb(255, 255, 255);
7  border-radius: 1rem;
8  padding: 1rem;
9  position: relative;
10  display: flex;
11  justify-content: center;
12  align-items: center;
13  transition: 300ms ease;
14  animation: 8s thumb-thumb infinite;
15}
16
17.card-id567 svg path {
18  transition: 300ms ease;
19  stroke: rgb(20, 20, 20);
20  opacity: 0;
21}
22
23.bold-567 {
24  font-weight: bold;
25}
26
27.blurry-splash {
28  position: absolute;
29  inset: 0;
30  width: 60px;
31  margin: 0 auto;
32  height: 60px;
33  border-radius: 1rem;
34  z-index: -1;
35  opacity: 70%;
36  filter: blur(15px);
37  background: linear-gradient(
38    120deg, rgb(119, 0, 255)
39    , rgb(22, 94, 250), rgb(44, 226, 250));
40}
41
42.prompt-id567 {
43  position: absolute;
44  color: rgb(29, 29, 29);
45  text-align: center;
46}
47
48.really-small-text {
49  text-align: center;
50  width: 100%;
51  position: absolute;
52  font-size: 8px;
53  margin-top: 28px;
54  opacity: 0.5;
55}
56
57.card-id567:hover {
58  cursor: none;
59}
60
61.card-id567:hover .prompt-id567 {
62  transition: 300ms ease;
63  opacity: 0;
64}
65
66.token-container {
67  animation: 2s spinny-token-yayyy infinite;
68  margin-bottom: 10px;
69}
70
71.prompt-id567 svg path {
72  stroke: none;
73  opacity: 1;
74}
75
76.card-id567:hover svg path {
77  opacity: 1;
78}
79
80@keyframes spinny-token-yayyy {
81  0% {
82    transform: perspective(200px) rotateY(0deg);
83  }
84
85  100% {
86    transform: perspective(200px) rotateY(360deg);
87  }
88}
89
90@keyframes thumb-thumb {
91  0%, 10%, 100% {
92    transform: scale(100%);
93  }
94
95  5% {
96    transform: scale(103%);
97  }
98
99  7% {
100    transform: scale(97%);
101  }
102}