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

淩亂°似流年 2022-10-06 05:58 379阅读 0赞

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

09a8e28f276a625f16920c8379931982.png

实现的代码。

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来实现的，小伙伴们自由发挥下，用到自己的项目中去吧

发表评论

表情：
评论列表 （有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS鼠标悬停

    > 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享： 先看效果 ![这里写图片描述][70] HTM

    港控/mmm°港控/mmm°/ 0 赞/ 411 阅读