Hitman Loading Sequence pure css3

Developer
Moklick
Size
3,402 Kb
Views
26,299
  1. Hitman Loading Sequence pure css3 Previews
  2. Hitman Loading Sequence pure css3 HTML Codes
  3. Hitman Loading Sequence pure css3 CSS Codes
  4. Hitman Loading Sequence pure css3 JS Codes

How do I make an hitman loading sequence pure css3?

Logo and loading sequence with PURE CSS3. What is a hitman loading sequence pure css3? How do you make a hitman loading sequence pure css3? This script and codes were developed by Moklick on 20 November 2022, Sunday.

Hitman Loading Sequence pure css3 Previews
IQ Test

Hitman Loading Sequence pure css3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hitman Loading Sequence pure css3</title> <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! */ @import url(https://fonts.googleapis.com/css?family=Cardo:400,700);
@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);
*{ margin:0; padding:0;
}
body{ background:black;
}
.logo{ text-transform:uppercase; text-align:center; width:575px; margin:0 auto;
}
.title{ font-family: 'Cardo', serif; letter-spacing:10px; font-size:5.525em; color:white; opacity:.85;
}
.border{ border-top:3px solid #6d101a; display:block; margin-top:-25px; width:560px; -webkit-filter:blur(1px);
}
.sub{ font-family: 'Pontano Sans', serif; letter-spacing:29px; font-size:1.85em; margin-left:9px; color:#6d101a; -webkit-filter:blur(1px);
}
.loader{ margin-top:50px; width:155px; margin:50px auto 0 auto; height:85px;
}
.loader span{ display:block; float:left; background:white; height:2%; opacity:0; -webkit-filter:blur(1px); animation: fade 4.5s ease-out infinite;
}
.loader .h{ animation: fadelong 4.5s ease-out infinite;
}
.loader span:nth-child(1){ width:2px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(2){ width:1px; margin-right:1px; animation-delay: .8s;
}
.loader span:nth-child(3){ width:1px; margin-right:1px; animation-delay: .2s;
}
.loader span:nth-child(4){ width:7px; margin-right:1px; animation-delay: .95s;
}
.loader span:nth-child(5){ width:1px; margin-right:1px; animation-delay: 1s;
}
.loader span:nth-child(6){ width:2px; margin-right:4px; animation-delay: 1.15s;
}
.loader span:nth-child(7){ width:4px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(8){ width:3px; margin-right:1px; animation-delay: .5s;
}
.loader span:nth-child(9){ width:1px; margin-right:1px; animation-delay: .85s;
}
.loader span:nth-child(10){ width:1px; margin-right:4px; animation-delay: .25s;
}
.loader span:nth-child(11){ width:2px; margin-right:6px; animation-delay: .35s;
}
.loader span:nth-child(12){ width:1px; margin-right:6px; animation-delay: .9s;
}
.loader span:nth-child(13){ width:2px; margin-right:1px; animation-delay: 1s;
}
.loader span:nth-child(14){ width:1px; margin-right:1px; animation-delay: 1.15s;
}
.loader span:nth-child(15){ width:1px; margin-right:5px; animation-delay: .15s;
}
.loader span:nth-child(16){ width:1px; margin-right:1px; animation-delay: .25s;
}
.loader span:nth-child(17){ width:1px; margin-right:1px; animation-delay: 1.25s;
}
.loader span:nth-child(18){ width:3px; margin-right:1px; animation-delay: 1.15s;
}
.loader span:nth-child(19){ width:2px; margin-right:1px; animation-delay: .5s;
}
.loader span:nth-child(20){ width:1px; margin-right:1px; animation-delay: .65s;
}
.loader span:nth-child(21){ width:4px; margin-right:4px; animation-delay: 1.25s;
}
.loader span:nth-child(22){ width:1px; margin-right:1px; animation-delay: 1.25s;
}
.loader span:nth-child(23){ width:1px; margin-right:1px; animation-delay: .45s;
}
.loader span:nth-child(24){ width:4px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(25){ width:4px; margin-right:3px; animation-delay: .4s;
}
.loader span:nth-child(26){ width:1px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(27){ width:1px; margin-right:1px; animation-delay: .2s;
}
.loader span:nth-child(28){ width:3px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(28){ width:3px; margin-right:5px; animation-delay: 1.1s;
}
.loader span:nth-child(29){ width:4px; margin-right:3px; animation-delay: .75s;
}
.loader span:nth-child(30){ width:1px; margin-right:1px; animation-delay: .9s;
}
.loader span:nth-child(30){ width:4px; margin-right:3px; animation-delay: 1.15s;
}
.loader span:nth-child(31){ width:2px; margin-right:5px; animation-delay: .25s;
}
.loader span:nth-child(32){ width:3px; margin-right:2px; animation-delay: .5s;
}
.loader span:nth-child(33){ width:1px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(34){ width:2px; margin-right:0px; animation-delay: 1s;
}
@keyframes fade{ 0%{height:2%;} 1%{opacity:1;} 50%{height:90%;} 70%{opacity:1;} 95%{opacity:0;} 100%{height:90%;}
}
@keyframes fadelong{ 0%{height:2%;} 1%{opacity:1;} 50%{height:100%;} 70%{opacity:1;} 95%{opacity:0;} 100%{height:100%;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="logo"> <div class="title">Hitman</div> <span class="border"></span> <div class="sub">Absolution</div>
</div>
<div class="loader"> <span class="h"></span> <span class="h"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span class="h"></span> <span class="h"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span class="h"></span> <span class="h"></span>
</div> <script src="js/index.js"></script>
</body>
</html>

Hitman Loading Sequence pure css3 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Cardo:400,700);
@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);
*{ margin:0; padding:0;
}
body{ background:black;
}
.logo{ text-transform:uppercase; text-align:center; width:575px; margin:0 auto;
}
.title{ font-family: 'Cardo', serif; letter-spacing:10px; font-size:5.525em; color:white; opacity:.85;
}
.border{ border-top:3px solid #6d101a; display:block; margin-top:-25px; width:560px; -webkit-filter:blur(1px);
}
.sub{ font-family: 'Pontano Sans', serif; letter-spacing:29px; font-size:1.85em; margin-left:9px; color:#6d101a; -webkit-filter:blur(1px);
}
.loader{ margin-top:50px; width:155px; margin:50px auto 0 auto; height:85px;
}
.loader span{ display:block; float:left; background:white; height:2%; opacity:0; -webkit-filter:blur(1px); animation: fade 4.5s ease-out infinite;
}
.loader .h{ animation: fadelong 4.5s ease-out infinite;
}
.loader span:nth-child(1){ width:2px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(2){ width:1px; margin-right:1px; animation-delay: .8s;
}
.loader span:nth-child(3){ width:1px; margin-right:1px; animation-delay: .2s;
}
.loader span:nth-child(4){ width:7px; margin-right:1px; animation-delay: .95s;
}
.loader span:nth-child(5){ width:1px; margin-right:1px; animation-delay: 1s;
}
.loader span:nth-child(6){ width:2px; margin-right:4px; animation-delay: 1.15s;
}
.loader span:nth-child(7){ width:4px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(8){ width:3px; margin-right:1px; animation-delay: .5s;
}
.loader span:nth-child(9){ width:1px; margin-right:1px; animation-delay: .85s;
}
.loader span:nth-child(10){ width:1px; margin-right:4px; animation-delay: .25s;
}
.loader span:nth-child(11){ width:2px; margin-right:6px; animation-delay: .35s;
}
.loader span:nth-child(12){ width:1px; margin-right:6px; animation-delay: .9s;
}
.loader span:nth-child(13){ width:2px; margin-right:1px; animation-delay: 1s;
}
.loader span:nth-child(14){ width:1px; margin-right:1px; animation-delay: 1.15s;
}
.loader span:nth-child(15){ width:1px; margin-right:5px; animation-delay: .15s;
}
.loader span:nth-child(16){ width:1px; margin-right:1px; animation-delay: .25s;
}
.loader span:nth-child(17){ width:1px; margin-right:1px; animation-delay: 1.25s;
}
.loader span:nth-child(18){ width:3px; margin-right:1px; animation-delay: 1.15s;
}
.loader span:nth-child(19){ width:2px; margin-right:1px; animation-delay: .5s;
}
.loader span:nth-child(20){ width:1px; margin-right:1px; animation-delay: .65s;
}
.loader span:nth-child(21){ width:4px; margin-right:4px; animation-delay: 1.25s;
}
.loader span:nth-child(22){ width:1px; margin-right:1px; animation-delay: 1.25s;
}
.loader span:nth-child(23){ width:1px; margin-right:1px; animation-delay: .45s;
}
.loader span:nth-child(24){ width:4px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(25){ width:4px; margin-right:3px; animation-delay: .4s;
}
.loader span:nth-child(26){ width:1px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(27){ width:1px; margin-right:1px; animation-delay: .2s;
}
.loader span:nth-child(28){ width:3px; margin-right:5px; animation-delay: 1s;
}
.loader span:nth-child(28){ width:3px; margin-right:5px; animation-delay: 1.1s;
}
.loader span:nth-child(29){ width:4px; margin-right:3px; animation-delay: .75s;
}
.loader span:nth-child(30){ width:1px; margin-right:1px; animation-delay: .9s;
}
.loader span:nth-child(30){ width:4px; margin-right:3px; animation-delay: 1.15s;
}
.loader span:nth-child(31){ width:2px; margin-right:5px; animation-delay: .25s;
}
.loader span:nth-child(32){ width:3px; margin-right:2px; animation-delay: .5s;
}
.loader span:nth-child(33){ width:1px; margin-right:1px; animation-delay: .75s;
}
.loader span:nth-child(34){ width:2px; margin-right:0px; animation-delay: 1s;
}
@keyframes fade{ 0%{height:2%;} 1%{opacity:1;} 50%{height:90%;} 70%{opacity:1;} 95%{opacity:0;} 100%{height:90%;}
}
@keyframes fadelong{ 0%{height:2%;} 1%{opacity:1;} 50%{height:100%;} 70%{opacity:1;} 95%{opacity:0;} 100%{height:100%;}
}

Hitman Loading Sequence pure css3 - Script Codes JS Codes

/*
this is a video of the original loading sequence:
http://youtu.be/1dt_OZJJzoU
*/
Hitman Loading Sequence pure css3 - Script Codes
Hitman Loading Sequence pure css3 - Script Codes
Home Page Home
Developer Moklick
Username moklick
Uploaded November 20, 2022
Rating 3.5
Size 3,402 Kb
Views 26,299
Do you need developer help for Hitman Loading Sequence pure css3?

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!

Moklick (moklick) Script Codes
Name
3D Mapbox
SVG Dom Visualization
Leaflet Transition Example
Random Skyline
CSS Color Fading
Responsive Codepen Glitch
CCTV Everywhere
Fullscreen fun
Money Over Everything
A Pen by moklick
Create amazing blog posts 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!