Snowman

by Anupama

HTML

<div class="container">
    <div class="snowman">
        <div class="head">
            <div class="eye eye1"></div>
            <div class="eye eye2"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
        </div>
        <div class="body">
            <div class="part top"></div>
            <div class="part bottom"></div>
        </div>
    </div>
    <div class="ball"></div>
    <div class="snowgun">
        <div class="top"></div>
    </div>
    <div class="ground">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
    </div>
</div>

CSS

.container {
    position:relative;
    margin:20px;
    background-color: #90CDF0;
    width: 575px;
    height: 200px;
    padding: 20px;
}
.snowman {
    float:left;
    margin-left:30px;
     -webkit-animation: shake 7s ease-in 2s infinite;
    animation: shake 7s ease-in 2s infinite; 
}
.head {
    border: 1px solid #cacaca;
    width: 80px;
    height:70px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position:relative;
    background-color:#fff;
    margin-bottom:-10px;
    z-index:3;
}
.body .part{
    border: 1px solid #cacaca;
    width: 100px;
    height:70px;
    -webkit-border-radius: 50%;
    border-radius: 50%; 
    margin-left:-10px;
    background-color:#fff;
}
.body .top {
    margin-bottom:-20px;
    position:relative;
    z-index:2;
}
.eye {
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:#000;
    position:absolute;
    top:16px;
    -webkit-animation: blink 3s ease-in-out 0s infinite;
    animation: blink 3s ease-in-out 0s infinite;
}
.eye1 {
    left:22px;
}
.eye2 {
    left:44px;
}
.nose {
    background-color:#F8BA5C;
    width:10px;
    height:15px;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:90%;
    border-bottom-right-radius:90%;
    position: absolute;
    top: 30px;
    left: 33px;
}
.mouth {
    border: 1px solid #cacaca;
    width: 35px;
    height: 8px;
    position: absolute;
    top: 50px;
    left: 20px;
    border-radius: 60%;
    background-color: #ffccff;
}
.snowgun {
    position:absolute;
    right:0px;
}
.snowgun .top {
    height:25px;
    width:100px;
    border:1px solid #cacaca;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    background-color:#274839;
}
.ball {
    height:20px;
    width:20px;
    border-radius:50%;
    background-color:#fff;
    margin:2px 1px;
    position:absolute;
    right:78px;
    z-index:2;
    -webkit-animation: throw 7s ease-in 2s infinite;
    animation: throw 7s ease-in...