Penguin by

Erik Schill

On: 7 Jun 2016

fullscreen 
<div id="iceberg"></div>
<div id="penguin">
    <div id="eye-left"></div>
    <div id="eye-right"></div>
    <div id="beak"></div>
    <div id="belly"></div>
    <div id="foot-left"></div>
    <div id="foot-right"></div>
</div>

body {
    margin: 0; 
    background-color: lightblue;
    height: 100%; 
    overflow: hidden
}
#penguin {
    background: black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 20vmin;
    height: 20vmin;
    position: relative;
    top: -1vmin;
    left: -25vmin;
    -webkit-animation:spin 3s ease-in infinite;
    -moz-animation:spin 3s ease-in infinite;
    animation:spin 3s ease-in infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(1080deg); left: 210vmin; top: 80vmin } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(1080deg); left: 210vmin; top: 80vmin} }
@keyframes spin { 100% { transform:rotate(1080deg); left: 210vmin; top: 80vmin} }
#eye-left {
    position: absolute;
    background: black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 10%;
    width: 10%;
    top: 20%;
    left: 20%;
    border: 1vmin solid white;
}
#eye-right {
    position: absolute;
    background: black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 10%;
    height: 10%;
    top: 20%;
    right: 20%;
    border: 1vmin solid white;
}
#beak {
    position: absolute;
    width: 12%;
    height: 6%;
    background: orange;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    top: 40%;
    left: 50%;
    margin: 0px 0px 0px -1.2vmin;
}
#belly {
    position: absolute;
    width: 60%;
    height: 40%;
    background: white;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    top: 55%;
    left: 50%;
    margin: 0px 0px 0px -6vmin;
}
#foot-left {
    position: absolute;
    width: 20%;
    height: 8%;
    background: orange;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    bottom: -2%;
    left: 20%;
    margin: 0px 0px 0px 0px;
}
#foot-right {
    position: absolute;
    width: 20%;
    height: 8%;
    background: orange;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    bottom: -2%;
    right: 20%;
    margin: 100px 1% 0px -10vmin;
}
#iceberg {
    position: absolute;
    background-color: #ccffff;
    width: 120vw;
    height: 100vh;
    top: 51%;
    left: -20%;
    -webkit-transform: rotate(19deg);
    -moz-transform: rotate(19deg);
    transform: rotate(19deg);
}

44