WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Eye Animation with Code Snippet
705
byby.createsite
Open In Editor
Publish Your Code
Recommended
18 February 2025
CodePen Home Valentine's
20 August 2025
Login & Register Form HTML CSS Template
13 April 2024
Simple CSS Card Template
HTML
Copy
var dream = {};
dream.code = " /* ... */ ";
dream.awareness = 0.8;
awake();
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #12141A; } .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; } .eye { width: 100px; height: 100px; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMCAwVjEwMCBWMCAgICAgLTMzIDI1aDE2bDI3IDMxYzAgMTMuMS02LjctMjAuNy0yMS43LTIxLjdsLTIxLjctMzIgLTIxLjcsMzJ6Ii8+PC9zdmc+'); background-size: contain; transform-origin: center bottom; } .code-lines { display: inline-block; position: absolute; color: #F8F8F2; animation: code-flow 4s linear infinite; } .code-line { background-color: rgba(255, 255, 255, 0.1); transform-origin: top; padding: 5px 10px; margin: 2px 0; border-radius: 5px; } @keyframes code-flow { 0% { transform: translateY(-20px) scale(1, 0.8); opacity: 0.8; } 50% { transform: translateY(0) scale(1, 1); opacity: 1; } 100% { transform: translateY(20px) scale(1, 0.8); opacity: 0.8; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */