Página de login

1420 nevax

Abrir no Editor Video Publique Seu Código

Recomendado

22 August 2025

Trecho de código de animação de coração CSS

28 August 2025

Modelo de site de marcenaria | Tailwind CSS, Design Artesanal

14 October 2025

Estrutura HTML de animação de carregamento CSS

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Connexion Ultime</title>
</head>
<body>
  <div class="background-stars">
    <script>
      for (let i = 0; i < 150; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        star.style.top = Math.random() * 100 + '%';
        star.style.left = Math.random() * 100 + '%';
        star.style.animationDuration = (Math.random() * 5 + 2) + 's';
        document.body.querySelector('.background-stars').appendChild(star);
      }
    </script>
  </div>

<div class="background-shapes">
    <div id="shapes-container"></div>
    <script>
      const shapes = [
        { type: 'circle', color: 'rgba(255, 0, 150, 0.8)' },
        { type: 'square', color: 'rgba(0, 200, 255, 0.8)' },
        { type: 'triangle', color: 'rgba(0, 255, 150, 0.8)' }
      ];

const shapeElements = [];

for (let i = 0; i < 9; i++) {
        const type = shapes[i % 3].type;
        const el = document.createElement('div');
        el.classList.add('shape', type);
        el.style.top = Math.random() * 100 + 'vh';
        el.style.left = Math.random() * 100 + 'vw';
        document.getElementById('shapes-container').appendChild(el);

shapeElements.push({
          el,
          dx: Math.random() * 2 + 0.5,
          dy: Math.random() * 2 + 0.5
        });
      }

function animateShapes() {
        shapeElements.forEach(shape => {
          let rect = shape.el.getBoundingClientRect();
          let x = rect.left;
          let y = rect.top;

let newX = x + shape.dx;
          let newY = y + shape.dy;

if (newX <= 0 || newX + rect.width >= window.innerWidth) shape.dx *= -1;
          if (newY <= 0 || newY + rect.height >= window.innerHeight) shape.dy *= -1;

shape.el.style.left = (shape.el.offsetLeft + shape.dx) + 'px';
          shape.el.style.top = (shape.el.offsetTop + shape.dy) + 'px';
        });

requestAnimationFrame(animateShapes);
      }

animateShapes();
    </script>
  </div>

<div class="login-container">
    <h2>Bienvenue</h2>
    <form>
      <div class="form-group">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur" required />
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" id="password" name="password" placeholder="Votre mot de passe" required />
      </div>
      <button type="submit">Se connecter</button>
    </form>
    <div class="footer">© 2025 Connexion Futuriste</div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(#0a0a23, #000);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }

.background-stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
    }

.background-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
    }

.star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }

@keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

.shape {
      position: absolute;
      opacity: 0.7;
    }

.circle {
      width: 40px;
      height: 40px;
      background: rgba(255, 0, 150, 0.8);
      border-radius: 50%;
    }

.square {
      width: 40px;
      height: 40px;
      background: rgba(0, 200, 255, 0.8);
    }

.triangle {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid rgba(0, 255, 150, 0.8);
    }

.login-container {
      background: rgba(15, 15, 30, 0.95);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset;
      width: 100%;
      max-width: 420px;
      animation: pulse 5s infinite;
      z-index: 1;
    }

@keyframes pulse {
      0%, 100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; }
      50% { box-shadow: 0 0 60px #ff66ff, 0 0 100px #00ffe1 inset; }
    }

.login-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 2rem;
      color: #ff66ff;
      text-shadow: 0 0 15px #ff66ff, 0 0 25px #00ffe1;
    }

.form-group {
      margin-bottom: 1.5rem;
    }

.form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: #00ffe1;
      text-shadow: 0 0 10px #00ffe1;
    }

.form-group input {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 12px;
      background-color: #111;
      color: #fff;
      box-shadow: 0 0 15px #ff00ff inset;
      font-size: 1rem;
    }

.form-group input:focus {
      outline: none;
      box-shadow: 0 0 20px #ff00ff inset, 0 0 10px #00ffe1;
    }

button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #ff00ff, #00ffe1);
      color: #000;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 25px #ff00ff;
      transition: all 0.4s ease;
    }

button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #ff00ff, 0 0 50px #00ffe1;
    }

.footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 0.9rem;
      color: #ccc;
      text-shadow: 0 0 5px #00ffe1;
    }

Recomendado

Trecho de código de animação de coração CSS

Modelo de site de marcenaria | Tailwind CSS, Design Artesanal

Estrutura HTML de animação de carregamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS