CRT TV Page Load Animation
How do I make an crt tv page load animation?
What is a crt tv page load animation? How do you make a crt tv page load animation? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
CRT TV Page Load Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CRT TV Page Load Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content"></div>
<div id="overlay"></div>
</body>
</html>
CRT TV Page Load Animation - Script Codes CSS Codes
#content, #overlay { position: absolute; display: inline-block; width: 100%; height: 100%; padding: 0;
}
#content { background: url(https://i.imgur.com/pBnJxHv.gif); background-size: 100% 100%;
}
#overlay { pointer-events: none; background: #000; opacity: 0; -webkit-animation: black-part 4s; -moz-animation: black-part 4s; animation: black-part 4s;
}
#overlay:after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; width: 100%; height: 100%; background: #fff; box-shadow: 0 0 1px 1px #fff; -webkit-animation: white-part 1s; -moz-animation: white-part 1s; animation: white-part 1s;
}
@-webkit-keyframes black-part { 0% { opacity: 1; } 25% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes black-part { 0% { opacity: 1; } 25% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes black-part { 0% { opacity: 1; } 25% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes white-part { 0% { width: 0; height: 0%; } 75% { width: 100%; height: 0%; } 100% { width: 100%; height: 100%; }
}
@-moz-keyframes white-part { 0% { width: 0; height: 0%; } 75% { width: 100%; height: 0%; } 100% { width: 100%; height: 100%; }
}
@keyframes white-part { 0% { width: 0; height: 0%; } 75% { width: 100%; height: 0%; } 100% { width: 100%; height: 100%; }
}
html, body { width: 100%; height: 100%; padding: 0;
}
Developer | Aaron Levine |
Username | Aldlevine |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,498 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sliding Single Select | 3,968 Kb |
Popup Modal | 3,696 Kb |
CSS Spinning Wireframe Sphere | 4,612 Kb |
IOS-7 style slide-toggle | 4,131 Kb |
Price is Right Wheel - Better Inertia | 5,730 Kb |
Card Mockup | 6,436 Kb |
JQuery.momentus | 5,092 Kb |
Kaskade 0.3 - Desktop Demo | 9,186 Kb |
Progress | 2,659 Kb |
Nav-Bar and Tab-Bar Layout | 3,936 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Addthis_button | Esambino | 1,691 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!