404 Animated Character
How do I make an 404 animated character?
Created for the 404 section for my portfolio site. Wanted something a pretty animated to add interest to this often forgottent page.. What is a 404 animated character? How do you make a 404 animated character? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.
404 Animated Character Previews
404 Animated Character - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>404 Animated Character</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: white;
}
.error404page { height: 800px;
}
.body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/404-character-new.png) 0 0 no-repeat; width: 200px; height: 200px;
}
.newcharacter404, .torso404, .body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 { background-size: 750px; position: absolute; display: block;
}
.newcharacter404 { width: 400px; height: 800px; left: 50%; top: 20px; margin-left: -200px;
}
.torso404 { position: absolute; display: block; top: 138px; left: 0px; width: 389px; height: 252px; animation: sway 20s ease infinite; transform-origin: 50% 100%;
}
.body404 { position: absolute; display: block; top: 0px; left: 0px; width: 389px; height: 253px;
}
.head404 { position: absolute; top: -148px; left: 106px; width: 160px; height: 194px; background-position: 0px -265px; transform-origin: 50% 85%; animation: headTilt 20s ease infinite;
}
.eyes404 { position: absolute; top: 92px; left: 34px; width: 73px; height: 18px; background-position: -162px -350px; animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;
}
.leftarm404 { position: absolute; top: 159px; left: 0; width: 165px; height: 73px; background-position: -265px -341px; transform-origin: 9% 35%; transform: rotateZ(0deg); animation: typeLeft 0.4s linear infinite;
}
.rightarm404 { position: absolute; top: 148px; left: 231px; width: 157px; height: 91px; background-position: -442px -323px; transform-origin: 90% 25%; animation: typeLeft 0.4s linear infinite;
}
.chair404 { position: absolute; top: 430px; left: 55px; width: 260px; height: 365px; background-position: -12px -697px;
}
.legs404 { position: absolute; top: 378px; left: 4px; width: 370px; height: 247px; background-position: -381px -443px;
}
.leftshoe404 { position: absolute; top: 591px; left: 54px; width: 130px; height: 92px; background-position: -315px -749px;
}
.rightshoe404 { position: absolute; top: 594px; left: 187px; width: 135px; height: 81px; background-position: -453px -749px; transform-origin: 35% 12%; animation: tapRight 1s linear infinite;
}
.laptop404 { position: absolute; top: 186px; left: 9px; width: 365px; height: 216px; background-position: -2px -466px; transform-origin: 50% 100%; animation: tapWobble 0.4s linear infinite;
}
@keyframes sway { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(0deg); } 25% { transform: rotateZ(4deg); } 45% { transform: rotateZ(4deg); } 50% { transform: rotateZ(0deg); } 70% { transform: rotateZ(0deg); } 75% { transform: rotateZ(-4deg); } 90% { transform: rotateZ(-4deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes headTilt { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(0deg); } 25% { transform: rotateZ(-4deg); } 35% { transform: rotateZ(-4deg); } 38% { transform: rotateZ(2deg); } 42% { transform: rotateZ(2deg); } 45% { transform: rotateZ(-4deg); } 50% { transform: rotateZ(0deg); } 70% { transform: rotateZ(0deg); } 82% { transform: rotateZ(0deg); } 85% { transform: rotateZ(4deg); } 90% { transform: rotateZ(4deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes typeLeft { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(7deg); } 75% { transform: rotateZ(-6deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes typeRight { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(-6deg); } 75% { transform: rotateZ(7deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes tapWobble { 0% { transform: rotateZ(-0.2deg); } 50% { transform: rotateZ(0.2deg); } 100% { transform: rotateZ(-0.2deg); }
}
@keyframes tapRight { 0% { transform: rotateZ(0deg); } 90% { transform: rotateZ(-6deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes blink404 { 0% { background-position: -162px -350px; } 94% { background-position: -162px -350px; } 98% { background-position: -162px -368px; } 100% { background-position: -162px -350px; }
}
@keyframes pan { 0% { transform: translateX(-2px); } 49% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 99% { transform: translateX(2px); } 100% { transform: translateX(-2px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="error404page"> <div class="newcharacter404"> <div class="chair404"></div> <div class="leftshoe404"></div> <div class="rightshoe404"></div> <div class="legs404"></div> <div class="torso404"> <div class="body404"></div> <div class="leftarm404"></div> <div class="rightarm404"></div> <div class="head404"> <div class="eyes404"></div> </div> </div> <div class="laptop404"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script>
</body>
</html>
404 Animated Character - Script Codes CSS Codes
body { background-color: white;
}
.error404page { height: 800px;
}
.body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/404-character-new.png) 0 0 no-repeat; width: 200px; height: 200px;
}
.newcharacter404, .torso404, .body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 { background-size: 750px; position: absolute; display: block;
}
.newcharacter404 { width: 400px; height: 800px; left: 50%; top: 20px; margin-left: -200px;
}
.torso404 { position: absolute; display: block; top: 138px; left: 0px; width: 389px; height: 252px; animation: sway 20s ease infinite; transform-origin: 50% 100%;
}
.body404 { position: absolute; display: block; top: 0px; left: 0px; width: 389px; height: 253px;
}
.head404 { position: absolute; top: -148px; left: 106px; width: 160px; height: 194px; background-position: 0px -265px; transform-origin: 50% 85%; animation: headTilt 20s ease infinite;
}
.eyes404 { position: absolute; top: 92px; left: 34px; width: 73px; height: 18px; background-position: -162px -350px; animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;
}
.leftarm404 { position: absolute; top: 159px; left: 0; width: 165px; height: 73px; background-position: -265px -341px; transform-origin: 9% 35%; transform: rotateZ(0deg); animation: typeLeft 0.4s linear infinite;
}
.rightarm404 { position: absolute; top: 148px; left: 231px; width: 157px; height: 91px; background-position: -442px -323px; transform-origin: 90% 25%; animation: typeLeft 0.4s linear infinite;
}
.chair404 { position: absolute; top: 430px; left: 55px; width: 260px; height: 365px; background-position: -12px -697px;
}
.legs404 { position: absolute; top: 378px; left: 4px; width: 370px; height: 247px; background-position: -381px -443px;
}
.leftshoe404 { position: absolute; top: 591px; left: 54px; width: 130px; height: 92px; background-position: -315px -749px;
}
.rightshoe404 { position: absolute; top: 594px; left: 187px; width: 135px; height: 81px; background-position: -453px -749px; transform-origin: 35% 12%; animation: tapRight 1s linear infinite;
}
.laptop404 { position: absolute; top: 186px; left: 9px; width: 365px; height: 216px; background-position: -2px -466px; transform-origin: 50% 100%; animation: tapWobble 0.4s linear infinite;
}
@keyframes sway { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(0deg); } 25% { transform: rotateZ(4deg); } 45% { transform: rotateZ(4deg); } 50% { transform: rotateZ(0deg); } 70% { transform: rotateZ(0deg); } 75% { transform: rotateZ(-4deg); } 90% { transform: rotateZ(-4deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes headTilt { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(0deg); } 25% { transform: rotateZ(-4deg); } 35% { transform: rotateZ(-4deg); } 38% { transform: rotateZ(2deg); } 42% { transform: rotateZ(2deg); } 45% { transform: rotateZ(-4deg); } 50% { transform: rotateZ(0deg); } 70% { transform: rotateZ(0deg); } 82% { transform: rotateZ(0deg); } 85% { transform: rotateZ(4deg); } 90% { transform: rotateZ(4deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes typeLeft { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(7deg); } 75% { transform: rotateZ(-6deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes typeRight { 0% { transform: rotateZ(0deg); } 25% { transform: rotateZ(-6deg); } 75% { transform: rotateZ(7deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes tapWobble { 0% { transform: rotateZ(-0.2deg); } 50% { transform: rotateZ(0.2deg); } 100% { transform: rotateZ(-0.2deg); }
}
@keyframes tapRight { 0% { transform: rotateZ(0deg); } 90% { transform: rotateZ(-6deg); } 100% { transform: rotateZ(0deg); }
}
@keyframes blink404 { 0% { background-position: -162px -350px; } 94% { background-position: -162px -350px; } 98% { background-position: -162px -368px; } 100% { background-position: -162px -350px; }
}
@keyframes pan { 0% { transform: translateX(-2px); } 49% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 99% { transform: translateX(2px); } 100% { transform: translateX(-2px); }
}
| Developer | Mark Thomes |
| Username | WithAnEs |
| Uploaded | July 04, 2022 |
| Rating | 4.5 |
| Size | 8,559 Kb |
| Views | 46,552 |
Do you need developer help for 404 Animated Character?
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!
Mark Thomes (WithAnEs) Script Codes
| Name | Size |
| CSS Books | 7,833 Kb |
| CSS Birthday Cake | 8,353 Kb |
| Sidebar Nav | 3,808 Kb |
| Swaying Open Sign | 3,523 Kb |
| CSS Self Portrait | 9,872 Kb |
| Popup Footer | 3,488 Kb |
| CSS Colorado Flag | 6,649 Kb |
| Sloshing Beaker | 7,223 Kb |
| Running Character | 6,843 Kb |
| SVG Search... | 7,601 Kb |
Create amazing art & images with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Responsive Pricing Table | Jeremycaris | 2,690 Kb |
| Cars going | Netoguimaraes | 1,699 Kb |
| Filtering with shuffle.js | Deyand | 2,712 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| We Simplify animation | Meodai | 48,169 Kb |
| Basecamp 3 Document | Lachlanjc | 3,811 Kb |
| Lecture 1 | Law | 0 Kb |
| Sign Up Form | Sicontis | 5,272 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
Do you want hide your ip address?
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!