Hitman Loading Sequence pure css3
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 - 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
*/
Developer | Moklick |
Username | moklick |
Uploaded | November 20, 2022 |
Rating | 3.5 |
Size | 3,402 Kb |
Views | 26,312 |
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 |
A Pen by moklick | 33,698 Kb |
CCTV Everywhere | 3,723 Kb |
Random Skyline | 2,353 Kb |
Damn Particlez | 2,805 Kb |
... is watching you | 2,423 Kb |
Berlin Building Map | 2,477 Kb |
Leaflet Transition Example | 33,818 Kb |
Codepen Inception | 1,384 Kb |
3D Mapbox | 3,508 Kb |
Zeichensatz | 2,058 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 |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Awesome | Samarthpd | 2,901 Kb |
Out of the blue | Giaco | 2,537 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Draggable directive | YahyaKacem | 2,277 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!