WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Focus Point Animation Snippet
616
byby.createsite
Open In Editor
Publish Your Code
Recommended
18 October 2025
CSS Button UI Sxrgxx Animation
22 August 2025
CSS Blob Notification Animation
10 November 2024
HTML CSS OTP Form
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) */