苏州网页制作设计,志鸿优化设计答案网,房地产网站建设策划方案,王烨捷之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器#xff1a;360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下#xff1a; 在线预览 源码下…之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下 在线预览 源码下载 实现的代码。 html代码 div classhi-icon-wrap hi-icon-effect-1 hi-icon-effect-1aa href# classhi-icon hi-icon-mobileMobile/aa href# classhi-icon hi-icon-screenDesktop/aa href# classhi-icon hi-icon-earthPartners/aa href# classhi-icon hi-icon-supportSupport/aa href# classhi-icon hi-icon-lockedSecurity/a
/div css3代码 .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);}
} viahttp://***/Article/20379
