html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：

实现的代码。

html代码：

复制代码

代码如下:

css3代码：

复制代码

代码如下:

body

{

background-color: #333;

}

div

{

width: 200px;

height: 200px;

margin: 0 auto;

}

span

{

position: relative;

width: 180px;

height: 180px;

display: block;

margin: auto;

top: 25px;

border: 20px solid rgba(255, 255, 0, .25);

background-color: rgba(124,155,13,1);

-webkit-transition: .5s;

-moz-transition: .5s;

-ms-transition: .5s;

transition: .5s;

border-radius: 30px 0px 30px 0px;

}

span:before, span:after

{

position: absolute;

display: block;

background-color: #fff;

border-radius: 10px;

margin: auto;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

}

span:before

{

width: 100px;

height: 10px;

content: "";

}

span:after

{

width: 10px;

height: 100px;

content: "";

}

div:hover span

{

-webkit-transform: scale(.5) rotate(45deg);

-moz-transform: scale(.5) rotate(45deg);

-ms-transform: scale(.5) rotate(45deg);

transform: scale(.5) rotate(45deg);

border-radius: 110px;

background-color: rgba(112,18,255,1);

}

非常棒的鼠标悬停特效吧，最重要的是完全是纯CSS3来实现的，小伙伴们自由发挥下，用到自己的项目中去吧

总结

以上是生活随笔为你收集整理的html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。