大家知道divcss制作鼠标经过图标动画效果吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。

简单的动画效果示例

这只是本文章中的其中一个示例(6)，主要的效果是旋转动画。

.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); }}

上面的代码，只要你熟悉transitions和animations这两个标签，那就很容易理解。当鼠标经过.hi-icon-effect-6 .hi-icon时背景变成白色rgba(255,255,255,1)，然后附带动画旋转transform: rotate()360度。其他的示例，大家可以下载附件，好好的看看其中的代码。

相信大家已经学会divcss制作鼠标经过图标动画效果了吧!感谢大家对我们网站的支持!

相关推荐：

css三行两列代码是什么呢