Jitter Pic
How do I make an jitter pic?
What is a jitter pic? How do you make a jitter pic? This script and codes were developed by Tompud on 19 November 2022, Saturday.
Jitter Pic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jitter Pic</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="threedee"></div>
<div class="threedee two"></div>
<div class="name">Phill McChicken</div>
</body>
</html>
Jitter Pic - Script Codes CSS Codes
html, body, .threedee { width: 100%; height: 100%; overflow: hidden; background: black; padding: 0;
}
.name { text-align: center; color: #fff; font-size: 9px; font-family: Helvetica; letter-spacing: 10px;
}
.threedee { margin: 40px auto 20px; position: relative; width: 99px; height: 99px; overflow: hidden; outline: 1px #fff solid;
}
.threedee:before { content: ""; display: block; background: red; height: 100%; width: 100%; background: url(https://i.imgur.com/tCXv74s.png) no-repeat; background-size: 100% 100%;
}
.threedee:after { content: ""; top: 0; left: 0; right: 0; display: block; position: absolute; background: red; height: 100%; width: 100%; background: url(https://i.imgur.com/tCXv74s.png) no-repeat; background-size: 100% 100%; opacity: .3; animation: swerveye .3s infinite; transition: .3s;
}
.threedee.two:after { content: ""; display: block; position: absolute; background: red; height: 100%; width: 100%; background: url(https://i.imgur.com/tCXv74s.png) no-repeat; mix-blend-mode: difference; background-size: 100% 100%; opacity: .5; animation: rotateye .2s infinite;
}
.threedee:before, .threedee:after { margin: 0 auto;
}
@keyframes rotateye { 0% {top: 2px; left: 0px; right: 0px; bottom: 0px;} 15% {top: 2px; left: 1px; right: 0px; bottom: 0px;} 30% {top: 0px; left: 2px; right: 0px; bottom: 0px;} 44% {top: 0px; left: 1px; right: 0px; bottom: 2px;} 58% {top: 0px; left: 0px; right: 0px; bottom: 2px;} 72% {top: 0px; left: 0px; right: 2px; bottom: 2px;} 86% {top: 0px; left: 0px; right: 1px; bottom: 0px;} 100% {top: 2px; left: 0px; right: 2px; bottom: 0px;}
}
@keyframes swerveye { 0% {left: 3px; right: 0px;} 50% {left: 0px; right: 3px;} 100% {left: 3px; right: 0px;}
}
| Developer | Tompud |
| Username | tompud |
| Uploaded | November 19, 2022 |
| Rating | 3 |
| Size | 1,932 Kb |
| Views | 20,240 |
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 |
| CSGO Killfeed | 2,427 Kb |
| Noise and Dividers | 2,381 Kb |
| Nav | 1,736 Kb |
| Skel Navbar | 3,851 Kb |
| Madeby Template | 1,552 Kb |
| Funky Text | 1,898 Kb |
| A Pen by tompud | 3,083 Kb |
| Skel UI Kit | 2,642 Kb |
| Frozn | 2,555 Kb |
| CSGO Accept Button | 2,159 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 |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
| No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
| NT Tribute | Skybutterfly | 2,850 Kb |
| Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
| Popover Example | Seanboom | 2,429 Kb |
| Cool audio | Bigliam | 1,868 Kb |
| Out of the blue | Giaco | 2,537 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| A Pen by Miro Olma | Programiro | 2,342 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!