✨ Animation d'ampoules disco lumineuses avec une touche glassmorphique ! ✨Code HTML CSS ET JAVASCRIPT-js tutoriel-php.cn

✨ Animation d'ampoules disco lumineuses avec une touche glassmorphique ! ✨Code HTML CSS ET JAVASCRIPT

Patricia Arquette

Libérer： 2024-12-24 17:25:13

original

442 Les gens l'ont consulté

✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code HTML CSS AND JAVASCRIPT

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation d'ampoule disco</title>
  <style>
    corps {
      marge : 0 ;
      hauteur : 100vh ;
      affichage : flexible ;
      justifier-contenu : centre ;
      aligner les éléments : centre ;
      arrière-plan : dégradé linéaire (45 degrés, #000000, #111111) ;
      famille de polices : Arial, sans empattement ;
    }

    .conteneur {
      affichage : flexible ;
      écart : 200 px ;
    }

    .mur {
      affichage : flexible ;
      direction flexible : colonne ;
      justifier-contenu : espace entre les deux ;
      hauteur : 300px ;
      remplissage : 15 px ;
      rayon de bordure : 10 px ;
      arrière-plan : rgba(96, 95, 95, 0,281) ;
      filtre de toile de fond : flou (10 px );
      box-shadow : 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    .ampoule {
      largeur : 60 px ;
      hauteur : 60px ;
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      bordure : 2px rgba solide (255, 255, 255, 0,2) ;
      rayon de bordure : 50 % ;
      filtre de toile de fond : flou (10 px );
      box-shadow : 0 0 5px rgba(255, 255, 255, 0.2), encart 0 0 10px rgba(255, 255, 255, 0.1);
      transition : ombre de la boîte 0,3 s, couleur d'arrière-plan 0,3 s ;
    }

    .ampoule.lueur {
      animation : disco 0,2s alterné infini ;
    }

    @keyframes discothèque {
      0% {
        couleur d'arrière-plan : rgba (255, 0, 128, 0,8) ;
        box-shadow : 0 0 40px 40px rgba(255, 0, 128, 0.8);
      }
      25 % {
        couleur d'arrière-plan : rgba(0, 255, 128, 0,8) ;
        box-shadow : 0 0 30px 10px rgba(0, 255, 128, 0,8);
      }
      50% {
        couleur d'arrière-plan : rgba(0, 128, 255, 0,8) ;
        box-shadow : 0 0 30px 10px rgba(0, 128, 255, 0.8);
      }
      75% {
        couleur d'arrière-plan : rgba (255, 255, 0, 0,8) ;
        box-shadow : 0 0 30px 10px rgba(255, 255, 0, 0,8);
      }
      100 % {
        couleur d'arrière-plan : rgba (255, 128, 0, 0,8) ;
        box-shadow : 0 0 30px 10px rgba(255, 128, 0, 0.8);
      }
    }

    .bouton de démarrage {
      position : absolue ;
      en bas : 50 px ;
      remplissage : 15px 30px ;
      arrière-plan : #ff5722 ;
      couleur : blanc ;
      bordure : aucune ;
      rayon de bordure : 10 px ;
      curseur : pointeur ;
      taille de police : 18 px ;
      poids de la police : gras ;
      box-shadow : 0 4px 8px rgba(0, 0, 0, 0.5);
      transition : arrière-plan 0,3 s ;
    }

    .start-button : survoler {
      arrière-plan : #ff784e ;
    }
  </style>
&Lt;/tête>
<corps>
  <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!