tutorial trap

Open In Editor Publish Your Code

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

tutorial trap

Recommended

Bootstrap Responsive Register Form

Bootstrap Navbar Template

Responsive Bootstrap Navbar

HTML

CSS

JS

Recommended

Bootstrap Responsive Register Form

Bootstrap Navbar Template

Responsive Bootstrap Navbar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS