/* 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); } }
Анимация CSS
Анимация плавного вращения для логотипов с использованием псевдоэлементов :before и :after.