Untitled
<!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; background: #000; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; } .scanlines { width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, #ff0000 0px, #ff0000 1px, #00ff00 1px, #00ff00 2px, #0000ff 2px, #0000ff 3px, #000000 3px, #000000 4px ); animation: shift 0.5s linear infinite; opacity: 0.7; } @keyframes shift { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } .noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAArvxenAAAACHRSTlMAGgQIFAEBg8DiuZkAAACWSURBVDjL1ZOxDgFBEEQHISJXER0dnYhO5D8gIhEi8QkdX+Df7NzuXWQvkKjipWZrnnal2UE4hG5l6DEUTlWlGqg8qnwqOgwKqjqqegw2qq2qHwMnqo8YLKsaWBMWC8kQQkgYhPRhMFsl8gZ79gfsCXvGXrA37B37wL6wU+wL+0FExFeEIb4jfxB+kS0hvySB8JtEv3++pROGtcxrzrZ1wwAAAABJRU5ErkJggg=='); opacity: 0.1; pointer-events: none; } .screen-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at center, transparent 0%, rgba(0, 0, 0, 0.2) 90% ); pointer-events: none; } </style> </head> <body> <div class="scanlines"></div> <div class="noise"></div> <div class="screen-effect"></div> </body> </html>
Leave a Comment