以前介绍了很多老鼠的CSS3实现悬停效果，今天和大家分享一个纯CSS3实现鼠标悬停动画按钮，按钮的鼠标经过一个方形变成圆形鼠标通过动画的形式时，感兴趣的朋友可以进来学习





今天，你给你一个纯CSS3实现鼠标悬停按钮，按钮的鼠标经过一个方形变成圆形鼠标通过动画的形式时，结果如下：


实现的代码。

HTML代码：
将内容复制到剪贴板









CSS3代码：

CSS代码将内容复制到剪贴板。


体
{
背景颜色：# 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；
bottombottom：0px；
左：0px；
错误：0px；
}
跨度：前
{
宽度：100px；
身高：10px；
内容：；
}

跨度：后
{
宽度：10px；
身高：100px；
内容：；
}

悬停跨度
{
WebKit的变换：规模（5）旋转（45deg）；
-moz变换：规模（5）旋转（45deg）；
MS：尺度变换（5）旋转（45deg）；
变换：规模（5）旋转（45deg）；
边界半径：110px；
背景颜色：RGBA（11218255,1）；
}