CodePen

HTML

            
              <div class="box"><span></span></div>
<div></div>
<div class="snow"></div>
            
          
!

CSS

            
              body{
  margin:100px 50%;
}
.box { 
    position: relative;
    display: block;
    width: 60px; 
   	height: 60px;
    background: #ccc;

}

span{
    position: absolute;
    top: 50%;
    left: 50%;
    display:inline-block;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: blue;
  
    
    -webkit-animation: spin 1s infinite;
	      -moz-animation: spin 1s infinite;
            animation: spin 1s infinite;
}

@-webkit-keyframes spin {
	0%   { -webkit-transform: rotate(0deg);}
	100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {  
	0%   { -moz-transform: rotate(0);}
	100% { -moz-transform: rotate(360deg);} 
}
@keyframes spin {  
	0%   { transform: rotate(0deg);}
	100% { transform: rotate(360deg);} 
} 

.snow{
 display: inline-block;
 -webkit-transition: all 1s; 
 -moz-transition: all 1s; 
 -ms-transition: all 1s; 
 -o-transition: all 1s;
 transition: all 1s; 
}

.snow:hover{
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);    
}

.snow:before {
 content: '☃'; 
 font-size: 4em;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................