Card by SouravBandyopadhyay

1.one-div {
2  width: 300px;
3  height: 300px;
4  background: linear-gradient(135deg, #ff5f6d, #ffc371, #ffd800);
5  position: relative;
6  overflow: hidden;
7  transform: rotate(45deg);
8  animation: rotate 5s infinite linear;
9  border-radius: 1.5rem;
10}
11
12@keyframes rotate {
13  0% {
14    transform: rotate(0deg);
15  }
16
17  100% {
18    transform: rotate(360deg);
19  }
20}
21
22.one-div::before {
23  content: '';
24  position: absolute;
25  top: 50%;
26  left: 50%;
27  width: 150px;
28  height: 150px;
29  background: radial-gradient(circle, #ffffff, transparent);
30  border-radius: 50%;
31  transform: translate(-50%, -50%);
32  opacity: 0.8;
33  animation: pulse 2s infinite;
34}
35
36@keyframes pulse {
37  0% {
38    transform: translate(-50%, -50%) scale(0.8);
39    opacity: 0.8;
40  }
41
42  50% {
43    transform: translate(-50%, -50%) scale(1.2);
44    opacity: 0.4;
45  }
46
47  100% {
48    transform: translate(-50%, -50%) scale(0.8);
49    opacity: 0.8;
50  }
51}
52
53.one-div:hover {
54  animation-play-state: paused;
55}
56