piège du tutoriel

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 May 2024

Effet de survol du bouton d'action d'appel

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%);
      }
    }

piège du tutoriel

Recommandé

Page héros du portfolio

Fiche produit Glassmorphism

Effet de survol du bouton d'action d'appel

HTML

CSS

JS

Recommandé

Page héros du portfolio

Fiche produit Glassmorphism

Effet de survol du bouton d'action d'appel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS