html knowhow

Animiertes Emoji

Umschaltfläche für Bild-Schieberegler

So sieht´s aus

Quellcode

<html>
<head>
Hier nichts

<style type="text/css">
.center{position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.emoji{position: relative; display: inline-block; height: 120px; width: 120px; border-radius: 50%; box-shadow: inset 0 0 10px 2px #eead2b; background: linear-gradient(#FFED65,#EEAD2F);}
.emoji_face,.emoji_brow, .emoji_eye,.emoji_mouth{position: absolute;}
.emoji_face{height: 120px; width: 120px; animation: face 3s linear infinite;}
@keyframes face {
15%, 25%{transform: rotate(20deg) translateX(-20px);}
45%, 65%{transform: rotate(-20deg) translateX(20px);}
75%, 100%{transform: rotate(0) translateX(0);}}
.emoji_brow{left: calc(50% - 3px); height: 6px; width: 6px; background: transparent; border-radius: 50%;
box-shadow: -18px 0 0 0 #aa7408, -33px 0 0 0 #aa7408, 18px 0 0 0 #aa7408, 33px 0 0 0 #aa7408; animation: eye_brow 3s linear infinite;}
@keyframes eye_brow {
15%, 65%{top: 25px; }
75%, 100%, 0%{top: 15px;} }
.emoji_brow:before, .emoji_brow:after{position: absolute; content: ''; left: calc(50% - 12px); top: -3px; width: 24px; height: 20px; border: 6px solid #aa7408; border-radius: 50%;
box-sizing: border-box; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent;}
.emoji_brow:before{margin-left: -25px;}
.emoji_brow:after{margin-left: 25px;}
.emoji_eye{top: 35px; left: calc(50% - 8px); height: 24px; width: 16px; border-radius: 50%; background: transparent; box-shadow: 25px 0 0 0 #1b2031, -25px 0 0 0 #1b2031;}
.emoji_mouth{top: 50%; left: calc(50% - 15px); width: 30px; height: 40px; border-radius: 50%; background: linear-gradient(#54290F,#622B0B,#6E3011); animation: mouth 3s linear infinite;}
@keyframes mouth {
10%, 30%{ width: 20px; height: 20px; left: calc(50% - 10px);}
50%, 70%{width: 30px; height: 40px; left: calc(50% - 15px);}
75%, 100%{height: 45px;}}
</style>
<head>

<body >
<center>
<div class="center">
<div class="emoji">
<div class="emoji_face">
<div class="emoji_brow"></div>
<div class="emoji_eye"></div>
<div class="emoji_mouth"></div>
</div>
</div>
</div>
</center>
</body>

</html>

Kontakt Datenschutz Impressum