Animated Logo for Herr Brueckers

Developer
Kai Brueckers
Size
3,752 Kb
Views
24,288
  1. Animated Logo for Herr Brueckers Previews
  2. Animated Logo for Herr Brueckers HTML Codes
  3. Animated Logo for Herr Brueckers CSS Codes

How do I make an animated logo for herr brueckers?

Since I started my blog herrbrueckers.de a few weeks ago I needed some kind of a »logo«. Together with my pal Fabian (@fabiandenter) we came up with the idea to just use an illustrated version of me, apparently. As SVG and with some nice keyframe animations the result looks quite good I think ;). What is a animated logo for herr brueckers? How do you make a animated logo for herr brueckers? This script and codes were developed by Kai Brueckers on 15 November 2022, Tuesday.

Animated Logo for Herr Brueckers Previews
IQ Test

Animated Logo for Herr Brueckers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Logo for Herr Brueckers</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: #f7f0e9; padding: 50px;
}
.herrbrueckers { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/herrbrueckers.svg"); width: 220px; height: 220px; display: block; position: relative; margin: 0 auto;
}
.herrbrueckers:after, .herrbrueckers:before { content: ""; position: absolute; display: block; border-radius: 50%; height: 12px; width: 6px; background: #303030; top: 50%; animation: blinkiblinki 6s 1s infinite linear alternate;
}
.herrbrueckers:after { right: 38%;
}
.herrbrueckers:before { left: 38%;
}
@keyframes blinkiblinki { 0% { height: 12px; top: 50%; } 10% { height: 12px; top: 50%; } 11% { height: 2px; top: 52%; } 13% { height: 2px; top: 52%; } 14% { height: 12px; top: 50%; } 30% { height: 12px; top: 50%; } 34% { height: 12px; top: 50%; } 36% { height: 2px; top: 52%; } 38% { height: 12px; top: 50%; } 40% { height: 2px; top: 52%; } 42% { height: 12px; top: 50%; } 99.9999% { height: 12px; top: 50%; }
}
.by { font-family: 'Open Sans', sans-serif; font-size: 12px; padding-top: 30px; color: #969696; text-align: center;
}
.by a { text-decoration: none; color: #969696; border-bottom: 1px solid #c9c9c9;
}
.by a:hover { color: #4a4a4a; border-bottom: 1px solid #7d7d7d;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='herrbrueckers'></div>
<div class='by'> Illustration by <a href='https://twitter.com/fabiandenter' target='_blank'>@fabiandenter</a> — Code & Animation by <a href='https://twitter.com/kaibrueckers' target='_blank'>@kaibrueckers</a>
</div>
</body>
</html>

Animated Logo for Herr Brueckers - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
body { background: #f7f0e9; padding: 50px;
}
.herrbrueckers { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142927/herrbrueckers.svg"); width: 220px; height: 220px; display: block; position: relative; margin: 0 auto;
}
.herrbrueckers:after, .herrbrueckers:before { content: ""; position: absolute; display: block; border-radius: 50%; height: 12px; width: 6px; background: #303030; top: 50%; animation: blinkiblinki 6s 1s infinite linear alternate;
}
.herrbrueckers:after { right: 38%;
}
.herrbrueckers:before { left: 38%;
}
@keyframes blinkiblinki { 0% { height: 12px; top: 50%; } 10% { height: 12px; top: 50%; } 11% { height: 2px; top: 52%; } 13% { height: 2px; top: 52%; } 14% { height: 12px; top: 50%; } 30% { height: 12px; top: 50%; } 34% { height: 12px; top: 50%; } 36% { height: 2px; top: 52%; } 38% { height: 12px; top: 50%; } 40% { height: 2px; top: 52%; } 42% { height: 12px; top: 50%; } 99.9999% { height: 12px; top: 50%; }
}
.by { font-family: 'Open Sans', sans-serif; font-size: 12px; padding-top: 30px; color: #969696; text-align: center;
}
.by a { text-decoration: none; color: #969696; border-bottom: 1px solid #c9c9c9;
}
.by a:hover { color: #4a4a4a; border-bottom: 1px solid #7d7d7d;
}
Animated Logo for Herr Brueckers - Script Codes
Animated Logo for Herr Brueckers - Script Codes
Home Page Home
Developer Kai Brueckers
Username kai
Uploaded November 15, 2022
Rating 4.5
Size 3,752 Kb
Views 24,288
Do you need developer help for Animated Logo for Herr Brueckers?

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
PikaCSSu
Lauftagebu.ch
Animated House of Cards Logo
Polygon Logo in CSS
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!