WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fragmento de animación de punto de enfoque CSS
294
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
24 February 2024
Caja de color
7 August 2025
Botón CSS elegante con texto e icono animados
15 April 2025
Un código de bhviet1510
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1f2937; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .focuspoint {position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #88D8FF; animation: mon_focus_shift 1s infinite alternate; } /* Simula a sensação de "pular" entre elementos e pensamentos */ @keyframes mon_focus_shift { 0% { transform: translate(0, 0) ; opacity: 1; /* Começa transparente */ } 50% { transform: translate(-5px, 10px); opacity: 0.5; /* Transitions para mais transparente */ } 100% { transform: translate(0, 0); opacity: 1; /* Volta ao normal */ } } .snippet {position: absolute; width: 100%; height: 10%; left: 0; top: 50%; transform: translateY(-50%); animation: mon_fragment_scan 2s infinite linear; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIwIiByPSIyMCIgc3Ryb2tlPSIjYmQwNDQ5IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb21hciIvPgo8L3N2Zz4="); /* Um gráfico aleatório, como fundo mental */ } @keyframes mon_fragment_scan { 0% {transform: translatex(-100%); opacity: 0.1;} /* Entra à partir da esquerda, quase invisível */ 50% {transform: translatex(0); opacity: 1; } /*Chega e fica transparente */ 100% {transform: translatex(100%); opacity: 0.1; } /* Sai por a direita, quase invisível */ }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */