Card by RozheenNM

1.one-div {
2  width: 200px;
3  height: 200px;
4  position: relative;
5  overflow: hidden;
6  border-radius: 10mm;
7  animation: flip-and-rotate 8s ease-in-out infinite;
8  transform-origin: center;
9  background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
10  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
11}
12
13.one-div::before,
14.one-div::after {
15  content: "";
16  position: absolute;
17  width: 100px;
18  height: 100px;
19  opacity: 80%;
20  background-color: rgb(255, 193, 122);
21  box-shadow: #33577e;
22  border-radius: 100%;
23  transform: translate(-50%, -80%) rotate(90deg);
24}
25
26.one-div::before {
27  top: 50%;
28  left: 50%;
29}
30
31.one-div::after {
32  bottom: 50%;
33  right: 50%;
34}
35
36.one-div::before,
37.one-div::after {
38  animation: move 1.2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.88);
39}
40
41@keyframes move {
42  0% {
43    transform: translate(50%, 50%) rotate(45deg) scale(0.8);
44  }
45
46  50% {
47    transform: translate(50%, 50%) rotate(45deg) scale(1.2);
48  }
49
50  100% {
51    transform: translate(50%, 50%) rotate(45deg) scale(0.8);
52  }
53}
54
55@keyframes flip-and-rotate {
56  0% {
57    transform: scale(1) rotate(0deg);
58    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
59  }
60
61  10% {
62    transform: scale(1) rotate(10deg);
63    background: linear-gradient(135deg, #7bbbd4, #33577e, #00061b);
64  }
65
66  20% {
67    transform: scale(1) rotate(20deg);
68    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
69  }
70
71  30% {
72    transform: scale(1) rotate(-30deg);
73    background: linear-gradient(135deg, #6cb2ce, #3d93a8, #00061b);
74  }
75
76  40% {
77    transform: scale(1) rotate(40deg);
78    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
79  }
80
81  50% {
82    transform: scale(1) rotate(-5deg);
83    background: linear-gradient(135deg, #64b5d4, #184d85, #00061b);
84  }
85
86  60% {
87    transform: scale(1) rotate(60deg);
88    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
89  }
90
91  70% {
92    transform: scale(1) rotate(70deg);
93    background: linear-gradient(135deg, #081c24, #041527, #00061b);
94  }
95
96  100% {
97    transform: scale(1) rotate(-360deg);
98    background: linear-gradient(135deg, #f7af6c, #fa8b8b, #f75bea);
99  }
100}
101