Animated House of Cards Logo

Developer
Kai Brueckers
Size
4,414 Kb
Views
12,144
  1. Animated House of Cards Logo Previews
  2. Animated House of Cards Logo HTML Codes
  3. Animated House of Cards Logo CSS Codes

How do I make an animated house of cards logo?

As a small tribute to »House of Cards« I recreated the intro logo animation in CSS. I decided to use an individual animation for every stripe for better animation-direction behaviour. Thanks to Fabian (http://twitter.com/fabiandenter) for introducing me to the series.. What is a animated house of cards logo? How do you make a animated house of cards logo? This script and codes were developed by Kai Brueckers on 15 November 2022, Tuesday.

Animated House of Cards Logo Previews
IQ Test

Animated House of Cards Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated House of Cards Logo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
body { background: #475c67; padding: 3em 2em;
}
.flag { position: relative; width: 320px; height: 195px; margin: 0 auto;
}
.flag li:nth-child(odd) { background: #6c1616; height: 15px; width: 100%;
}
.flag li:nth-child(even) { background: #fff; height: 15px; width: 100%;
}
.flag li:nth-child(n+7) { width: 190px;
}
.flag div { position: absolute; background: #06103c; height: 105px; width: 130px; bottom: 0; left: 190px;
}
.flag li:nth-child(1) { animation: fill-stripe1 3s infinite ease alternate;
}
.flag li:nth-child(2) { animation: fill-stripe2 3s infinite ease alternate;
}
.flag li:nth-child(3) { animation: fill-stripe3 3s infinite ease alternate;
}
.flag li:nth-child(4) { animation: fill-stripe4 3s infinite ease alternate;
}
.flag li:nth-child(5) { animation: fill-stripe5 3s infinite ease alternate;
}
.flag li:nth-child(6) { animation: fill-stripe6 3s infinite ease alternate;
}
.flag li:nth-child(7) { animation: fill-stripe7 3s infinite ease alternate;
}
.flag li:nth-child(8) { animation: fill-stripe8 3s infinite ease alternate;
}
.flag li:nth-child(9) { animation: fill-stripe9 3s infinite ease alternate;
}
.flag li:nth-child(10) { animation: fill-stripe10 3s infinite ease alternate;
}
.flag li:nth-child(11) { animation: fill-stripe11 3s infinite ease alternate;
}
.flag li:nth-child(12) { animation: fill-stripe12 3s infinite ease alternate;
}
.flag li:nth-child(13) { animation: fill-stripe13 3s infinite ease alternate;
}
.flag div { animation: fill-blue 3s infinite ease alternate;
}
@keyframes fill-stripe1 { 0% { width: 0; } 12% { width: 0; } 32% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe2 { 0% { width: 0; } 14% { width: 0; } 34% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe3 { 0% { width: 0; } 16% { width: 0; } 36% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe4 { 0% { width: 0; } 18% { width: 0; } 38% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe5 { 0% { width: 0; } 20% { width: 0; } 40% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe6 { 0% { width: 0; } 22% { width: 0; } 42% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe7 { 0% { width: 0; } 24% { width: 0; } 44% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe8 { 0% { width: 0; } 26% { width: 0; } 46% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe9 { 0% { width: 0; } 28% { width: 0; } 48% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe10 { 0% { width: 0; } 30% { width: 0; } 50% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe11 { 0% { width: 0; } 32% { width: 0; } 52% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe12 { 0% { width: 0; } 34% { width: 0; } 54% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe13 { 0% { width: 0; } 36% { width: 0; } 56% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-blue { 0% { width: 0; } 54% { width: 0; } 72% { width: 130px; } 100% { width: 130px; }
}
.by { font-family: 'Open Sans', sans-serif; font-size: 12px; padding-top: 30px; color: rgba(255, 255, 255, 0.6); text-align: center;
}
.by a { text-decoration: none; color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.by a:hover { color: #fff; border-bottom: 1px solid #fff;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='flag'> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div></div>
</div>
<div class='by'> Tribute to <a href='https://www.facebook.com/HouseofCards' target='_blank'>Netflix's House of Cards</a> — Code & Animation by <a href='https://twitter.com/kaibrueckers' target='_blank'>@kaibrueckers</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Animated House of Cards Logo - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
body { background: #475c67; padding: 3em 2em;
}
.flag { position: relative; width: 320px; height: 195px; margin: 0 auto;
}
.flag li:nth-child(odd) { background: #6c1616; height: 15px; width: 100%;
}
.flag li:nth-child(even) { background: #fff; height: 15px; width: 100%;
}
.flag li:nth-child(n+7) { width: 190px;
}
.flag div { position: absolute; background: #06103c; height: 105px; width: 130px; bottom: 0; left: 190px;
}
.flag li:nth-child(1) { animation: fill-stripe1 3s infinite ease alternate;
}
.flag li:nth-child(2) { animation: fill-stripe2 3s infinite ease alternate;
}
.flag li:nth-child(3) { animation: fill-stripe3 3s infinite ease alternate;
}
.flag li:nth-child(4) { animation: fill-stripe4 3s infinite ease alternate;
}
.flag li:nth-child(5) { animation: fill-stripe5 3s infinite ease alternate;
}
.flag li:nth-child(6) { animation: fill-stripe6 3s infinite ease alternate;
}
.flag li:nth-child(7) { animation: fill-stripe7 3s infinite ease alternate;
}
.flag li:nth-child(8) { animation: fill-stripe8 3s infinite ease alternate;
}
.flag li:nth-child(9) { animation: fill-stripe9 3s infinite ease alternate;
}
.flag li:nth-child(10) { animation: fill-stripe10 3s infinite ease alternate;
}
.flag li:nth-child(11) { animation: fill-stripe11 3s infinite ease alternate;
}
.flag li:nth-child(12) { animation: fill-stripe12 3s infinite ease alternate;
}
.flag li:nth-child(13) { animation: fill-stripe13 3s infinite ease alternate;
}
.flag div { animation: fill-blue 3s infinite ease alternate;
}
@keyframes fill-stripe1 { 0% { width: 0; } 12% { width: 0; } 32% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe2 { 0% { width: 0; } 14% { width: 0; } 34% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe3 { 0% { width: 0; } 16% { width: 0; } 36% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe4 { 0% { width: 0; } 18% { width: 0; } 38% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe5 { 0% { width: 0; } 20% { width: 0; } 40% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe6 { 0% { width: 0; } 22% { width: 0; } 42% { width: 100%; } 90% { width: 100%; } 100% { width: 100%; }
}
@keyframes fill-stripe7 { 0% { width: 0; } 24% { width: 0; } 44% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe8 { 0% { width: 0; } 26% { width: 0; } 46% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe9 { 0% { width: 0; } 28% { width: 0; } 48% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe10 { 0% { width: 0; } 30% { width: 0; } 50% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe11 { 0% { width: 0; } 32% { width: 0; } 52% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe12 { 0% { width: 0; } 34% { width: 0; } 54% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-stripe13 { 0% { width: 0; } 36% { width: 0; } 56% { width: 190px; } 90% { width: 190px; } 100% { width: 190px; }
}
@keyframes fill-blue { 0% { width: 0; } 54% { width: 0; } 72% { width: 130px; } 100% { width: 130px; }
}
.by { font-family: 'Open Sans', sans-serif; font-size: 12px; padding-top: 30px; color: rgba(255, 255, 255, 0.6); text-align: center;
}
.by a { text-decoration: none; color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.by a:hover { color: #fff; border-bottom: 1px solid #fff;
}
Animated House of Cards Logo - Script Codes
Animated House of Cards Logo - Script Codes
Home Page Home
Developer Kai Brueckers
Username kai
Uploaded November 15, 2022
Rating 3.5
Size 4,414 Kb
Views 12,144
Do you need developer help for Animated House of Cards Logo?

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!

Kai Brueckers (kai) Script Codes
Name
Lauftagebu.ch
Polygon Logo in CSS
PikaCSSu
Animated Logo for Herr Brueckers
Create amazing love letters 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!