piège du tutoriel

474 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 March 2025

Page de destination du magasin d'informatique

21 September 2024

Saisie du mot de passe Lumière

25 August 2024

Découverte des produits d'animation d'interface utilisateur

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    .animation-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }

.tutorial-box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: #222;
      border-radius: 10px;
      animation: tutorialPulse 1.5s infinite alternate ease-in-out;
    }

.tutorial-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.1);
      animation: tutorialGlitch 1.5s infinite linear alternate;
    }

/*  Gatilhos: Loop infinito, atualização constante.

Visão: Simula a sensação de estar preso em um tutorial cíclico,
      começando com lógica, mas se contorcendo em elementos perturbadores
      */
    @keyframes tutorialPulse {
      0% {
        transform: scale(1);  
      }
      50% {
        transform: scale(1.1);  
      }
      100% {
        transform: scale(1);  
      }
    }

@keyframes tutorialGlitch {
      0% {
        clip-path: circle(50%);
      }
      50% {
        clip-path: circle(70% at 50% 50%); 
      }
      100% {
        clip-path: circle(50%);
      }
    }

Recommandé

Page de destination du magasin d'informatique

Saisie du mot de passe Lumière

Découverte des produits d'animation d'interface utilisateur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS