Glass Card with Animated Background Floating Dots

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="part-wrap"><div class="part p1"></div><div class="part p2"></div><form class="part-card" onsubmit="return false;"><h3>Sign In</h3><input type="email" placeholder="Email"><input type="password" placeholder="Password"><button type="submit">Sign In</button></form></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.part-wrap { position: relative; width: 200px; height: 180px; display: flex; align-items: center; justify-content: center; margin: auto; overflow: hidden; border-radius: 16px; background: #09090b; }
.part { position: absolute; border-radius: 50%; opacity: 0.5; animation: riseUp 4s infinite linear; }
.p1 { width: 40px; height: 40px; background: #ec4899; left: 20%; animation-duration: 3s; }
.p2 { width: 60px; height: 60px; background: #3b82f6; right: 20%; animation-duration: 5s; }
@keyframes riseUp { 0% { transform: translateY(100px) scale(0.8); } 100% { transform: translateY(-100px) scale(1.2); } }
.part-card { position: relative; z-index: 2; width: 180px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 14px; font-family: system-ui, sans-serif; text-align: center; box-sizing: border-box; }
.part-card h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #fff; }
.part-card input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 6px; font-size: 8px; color: #fff; outline: none; margin-bottom: 6px; box-sizing: border-box; }
.part-card button { width: 100%; background: #ffffff; color: #000; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 900; cursor: pointer; margin-top: 2px; }