圆形时尚图标鼠标HOVER效果

CSS3 animations CSS3 transitions

HTML结构:
图标组的结构是使用一个div包含一组a元素，给每个a元素设置图标class。

Mobile
Desktop
Partners
Support
Security

CSS样式：
下面的样式是鼠标hover时，圆形图标旋转的效果。

.hi-icon-effect-6 .hi-icon {
box-shadow: 0 0 0 4px rgba(255,255,255,1);
transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
background: rgba(255,255,255,1);
color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}