SwingPhone

Swing phone for site

by Anton Kolesnikov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="circle-bg">
</div>
<div id="circle">
    <i class="fa fa-phone"></i>
</div>

CSS

#circle, #circle-bg {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 35px;
    left: 35px;
    border-radius: 35px;
}
#circle-bg {
    box-shadow: 0 0 10px 10px red;
    background: red;
    opacity: 0.3;
    z-index: 99;
    
    -webkit-animation: border-anim 2s ease-in-out infinite;
}
#circle {
    background-color: #F15A21;
    font-size: 38px;
    box-shadow: inset 0 0 0 #fff;
    z-index: 100;
  
    transition:all 0.5s ease; /* Анимация цвета */
}
#circle > i {
    margin: 17px 0 0 20px;
    color: #FFF;
    
    transition:all 0.5s ease; /* Анимация цвета */
}
#circle:hover {
    background-color: #F15A21;
    box-shadow: inset 0 0 0 10px #2C4A90;
    
    -webkit-animation: swing 1.2s ease infinite;
    -webkit-animation-delay: 0.3s;
}
#circle:hover > i {
    color: #2C4A90;
}
@-webkit-keyframes swing
{
    15%{-webkit-transform: rotateZ(-30deg);}
    30%{-webkit-transform: rotateZ(20deg);}
    50%{-webkit-transform: rotateZ(-15deg);}
    65%{-webkit-transform: rotateZ(5deg);}
    80%{-webkit-transform: rotateZ(-2deg);}
    100%{-webkit-transform: rotateZ(0deg);}
}
@-webkit-keyframes border-anim 
{
    0%{-webkit-transform: scale(0.9);}
    50%{-webkit-transform: scale(1);}
    100%{-webkit-transform: scale(0.9);}
}