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 - 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 |
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 |
Sloshing Beaker | 7,223 Kb |
CSS Birthday Cake | 8,353 Kb |
Beer Color | 7,886 Kb |
SVG Search... | 7,601 Kb |
SVG Stroke Pie Chart | 10,209 Kb |
Swaying Open Sign | 3,523 Kb |
CSS Self Portrait | 9,872 Kb |
Social Icons | 8,247 Kb |
Sidebar Nav | 3,808 Kb |
Running Character | 6,843 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 |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
AngularJS Skills | Supro | 3,312 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 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!