CSS3鼠标悬停动画按钮特效

CSS3 的按钮特效动画，玩得好真能让一个页面瞬间“有灵魂”。这个资源讲的是鼠标滑过按钮时的动画切换，用起来挺简单，效果还蛮炫。你只要写个基础的 HTML 按钮结构，再加上几段 CSS3 的动画和过渡属性，就能做出那种“滑一下亮一下”的交互感，用户体验能提升不少。

CSS3 的transition和:hover配合用，效果立马就出来了。比如按钮背景变色、浮起来一点、阴影加深，这些统统不靠 JS 就能搞定。再加点@keyframes写个脉冲动画，让按钮动起来更有节奏感，像是有生命一样，挺带感的。

代码也不复杂，一般就几十行 CSS，结构清爽。你只要会写.btn-effect那种类名的样式，再多试试box-shadow和transform的组合，基本就能套着用了。页面干净、加载快，也好维护，尤其适合做产品页、登录页按钮。

注意哦，动画太多影响性能，尤其是在移动端，用得时候别全场狂撒，点到为止最好。如果你想更花点，也可以参考几个相关效果：

• CSS3 鼠标 hover 按钮过渡动画效果
• 多色 CSS3 鼠标滑过按钮动画效果
• css3 鼠标移入样式变化过渡效果

如果你想要直接上手看代码，可以下载压缩包texiao4724_1560680955，里面 HTML 和 CSS 都写好了，改一改就能直接用。开发时顺手装个autoprefixer，省得你手动加前缀，对兼容老浏览器也更稳。