Анимация плавного вращения для логотипов с использованием псевдоэлементов :before и :after.
<div class="mozg"> <h1 class="shar"> <a href="#" data-name="Про жизнь"> <span class="pur">Про</span> <span class="por">жизнь</span> </a> </h1> </div>

/* css animation rotate*/
.mozg {
    clear: both;
    height: 100%;
    margin: 30px auto;
    position: inherit;
    text-align: center;
    width: auto;
}
.shar {
    bottom: 0;
    display: inline-block;
    height: 214px;
    margin: 0 auto;
    position: relative;
    width: 214px;
}
.shar .pur {
    font-size: 0.7em;
}
.shar .por {
    font-size: 1.2em;
}
.shar, .shar A {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 5px #7f0c23;
}
.shar .shar__no-link, .shar A {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a90329 0%, #8f0222 44%, #6d0019 100%) repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 transparent inset, 0 0 0 10px #fff, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
    display: block;
    height: 214px;
    position: relative;
    width: 214px;
}
.shar .logo__no-link::before, .shar A::before {
    content: "";
    display: inline-block;
    height: 214px;
    margin-right: -0.1em;
    vertical-align: middle;
    width: 0;
}
.shar A {
    transition: all 0.5s ease 0s;
}
.shar A::after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 218.8px;
    left: -2.4px;
    position: absolute;
    top: -2.4px;
    transition: all 0.5s ease 0s;
    width: 218.8px;
}
.shar A:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%) repeat scroll 0 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px #fff, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
    color: #ddd;
    text-shadow: 0 2px 5px #000;
}
.shar A:hover::after {
    animation: 2s linear 0s normal none infinite running rotate;
    box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0 0 rgba(170, 255, 0, 0.3), 0 20.384px 0 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0 0 rgba(0, 255, 170, 0.3), 20.384px 0 0 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0 0 rgba(170, 0, 255, 0.3);
}
@keyframes rotate {
100% {
    transform: rotate(360deg);
}
}