Card by dylanharriscameron

1.card {
2  position: relative;
3  width: 200px;
4  height: 250px;
5  border-radius: 14px;
6  z-index: 1111;
7  overflow: hidden;
8  display: flex;
9  flex-direction: column;
10  align-items: center;
11  justify-content: center;
12  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
13  ;
14}
15
16.bg {
17  position: absolute;
18  top: 5px;
19  left: 5px;
20  width: 190px;
21  height: 240px;
22  z-index: 2;
23  background: rgba(255, 255, 255, .95);
24  backdrop-filter: blur(24px);
25  border-radius: 10px;
26  overflow: hidden;
27  outline: 2px solid white;
28}
29
30.blob {
31  position: absolute;
32  z-index: 1;
33  top: 50%;
34  left: 50%;
35  width: 150px;
36  height: 150px;
37  border-radius: 50%;
38  background-color: #ff0000;
39  opacity: 1;
40  filter: blur(12px);
41  animation: blob-bounce 5s infinite ease;
42}
43
44@keyframes blob-bounce {
45  0% {
46    transform: translate(-100%, -100%) translate3d(0, 0, 0);
47  }
48
49  25% {
50    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
51  }
52
53  50% {
54    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
55  }
56
57  75% {
58    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
59  }
60
61  100% {
62    transform: translate(-100%, -100%) translate3d(0, 0, 0);
63  }
64}
65