Css Kodu
* { margin: 0; padding: 0;}
.main { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; box-sizing: border-box; border-radius: 50%; background: transparent; box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8); animation: move 6s linear infinite;}
.main::after { position: absolute; content: ""; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); left: 80px; top: 80px; border-radius: 50%; animation: move2 6s linear infinite; filter: blur(1px);}
.main::before { position: absolute; content: ""; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); left: 130px; top: 70px; border-radius: 50%; animation: move3 6s linear infinite; filter: blur(1px);}
@keyframes move { 50% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
75% { border-radius: 74% 26% 70% 30% / 78% 76% 24% 22%; }
25% { border-radius: 51% 49% 43% 57% / 43% 68% 32% 57%; }}
@keyframes move2 { 50% { left: 60px; top: 80px; }
75% { left: 80px; top: 120px; }
25% { left: 50px; top: 120px; }}
@keyframes move3 { 50% { left: 110px; top: 75px; }
75% { left: 130px; top: 100px; }
25% { left: 100px; top: 90px; }}Arka planlı hali
* { margin: 0; padding: 0;}
body { background: #1e90ff;}
.main { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; box-sizing: border-box; border-radius: 50%; background: transparent; box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8); animation: move 6s linear infinite;}
.main::after { position: absolute; content: ""; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); left: 80px; top: 80px; border-radius: 50%; animation: move2 6s linear infinite; filter: blur(1px);}
.main::before { position: absolute; content: ""; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); left: 130px; top: 70px; border-radius: 50%; animation: move3 6s linear infinite; filter: blur(1px);}
@keyframes move { 50% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
75% { border-radius: 74% 26% 70% 30% / 78% 76% 24% 22%; }
25% { border-radius: 51% 49% 43% 57% / 43% 68% 32% 57%; }}
@keyframes move2 { 50% { left: 60px; top: 80px; }
75% { left: 80px; top: 120px; }
25% { left: 50px; top: 120px; }}
@keyframes move3 { 50% { left: 110px; top: 75px; }
75% { left: 130px; top: 100px; }
25% { left: 100px; top: 90px; }} 
