انیمیشن دکمه

        
            ≪!DOCTYPE html≫
            ≪html lang="fa"≫
            ≪head≫
            ≪meta charset="UTF-8"≫
            ≪title≫Neon Button≪/title≫
            ≪style≫
            body {
            background: #0f172a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
            }

            .neon-btn {
            padding: 15px 40px;
            font-size: 20px;
            color: #22d3ee;
            border: 2px solid #22d3ee;
            background: transparent;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 0 10px #22d3ee;
            }

            .neon-btn:hover {
            color: #0f172a;
            background: #22d3ee;
            box-shadow: 0 0 25px #22d3ee, 0 0 50px #22d3ee;
            }

            ≪/style≫
            ≪/head≫
            ≪body≫

            ≪button class="neon-btn"≫START GAME≪/button≫

            ≪/body≫
            ≪/html≫
        
    

انیمیشن کادر

        
            ≪!DOCTYPE html>
            ≪html lang="fa">
            ≪head>
            ≪meta charset="UTF-8">
            ≪title>Hover Card≪/title>
            ≪style>
            body {
            background: #020617;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
            }

            .card {
            width: 220px;
            height: 300px;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            border-radius: 15px;
            color: white;
            text-align: center;
            padding: 20px;
            transition: 0.4s;
            }

            .card:hover {
            transform: translateY(-15px) scale(1.05);
            box-shadow: 0 20px 40px rgba(0,255,255,0.4);
            }

            .card img {
            width: 100px;
            margin-bottom: 15px;
            }
            ≪/style>
            ≪/head>
            ≪body>

            ≪div class="card">
                ≪img src="https://cdn-icons-png.flaticon.com/512/4140/4140048.png">
                ≪h3>Shadow Ninja≪/h3>
                ≪p>Speed: ⚡⚡⚡⚡≪/p>
            ≪/div>

            ≪/body>
            ≪/html>
        
    

انیمیشن لودینگ

        
            ≪!DOCTYPE html≫
            ≪html lang="fa"≫
            ≪head≫
            ≪meta charset="UTF-8"≫
            ≪title≫Game Loader≪/title≫
            ≪style≫
            body {
            background: #020617;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            }

            .loader {
            display: flex;
            gap: 10px;
            }

            .loader span {
            width: 15px;
            height: 15px;
            background: #22d3ee;
            border-radius: 50%;
            animation: bounce 0.6s infinite alternate;
            }

            .loader span:nth-child(2) { animation-delay: 0.2s; }
            .loader span:nth-child(3) { animation-delay: 0.4s; }

            @keyframes bounce {
            to {
                transform: translateY(-15px);
                opacity: 0.5;
            }
            }
            ≪/style≫
            ≪/head≫
            ≪body≫

            ≪div class="loader"≫
            ≪span≫≪/span≫
            ≪span≫≪/span≫
            ≪span≫≪/span≫
            ≪/div≫

            ≪/body≫
            ≪/html≫