鼠标悬停动画按钮采用纯CSS3实现
本文主要介绍了鼠标的纯CSS3实现悬停按钮的动画，需要的朋友可以参考下今天，你给你一个纯CSS3实现鼠标悬停按钮，按钮的鼠标经过一个方形变成圆形鼠标通过动画的形式时，结果如下：
实现的代码。
HTML代码：
复制代码代码如下所示：
CSS3代码：
复制代码代码如下所示：
体
{
背景颜色：# 333；
}
DIV
{
宽度：200px；
身高：200px；
保证金：0汽车；
}
跨度
{
职位：相对；
宽度：180px；
身高：180px；
显示块；
保证金：汽车；
上图：25px；
边境：20px固体RGBA（255, 255, 0。25）；
背景颜色：RGBA（124155,13,1）；
WebKit的过渡：5S；
-moz过渡：5S；
- MS转换：5s；
转变：5S；
边界半径：30px 0px 30px 0px；
}
跨度：前，跨度：后
{
位置：绝对；
显示块；
背景颜色：# FFF；
边界半径：10px；
保证金：汽车；
上图：0px；
底部：0px；
左：0px；
右：0px；
}
跨度：前
{
宽度：100px；
身高：10px；
内容：；
}
跨度：后
{
宽度：10px；
身高：100px；
内容：；
}
悬停跨度
{
WebKit的变换：规模（5）旋转（45deg）；
-moz变换：规模（5）旋转（45deg）；
MS：尺度变换（5）旋转（45deg）；
变换：规模（5）旋转（45deg）；
边界半径：110px；
背景颜色：RGBA（11218255,1）；
}
很好的鼠标悬停效果，最重要的是完全纯CSS3实现，伙伴们自由发挥，用自己的项目去酒吧