今天給大家?guī)?lái)一款純css3實(shí)現(xiàn)的鼠標(biāo)懸停動(dòng)畫按鈕。這款按鈕鼠標(biāo)經(jīng)過(guò)前以正方形的形式，當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候以動(dòng)畫的形式變成圓形。效果圖如下：

實(shí)現(xiàn)的代碼。

html代碼：

復(fù)制代碼

代碼如下:

css3代碼：

復(fù)制代碼

代碼如下:

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);

}

非常棒的鼠標(biāo)懸停特效吧，最重要的是完全是純CSS3來(lái)實(shí)現(xiàn)的，小伙伴們自由發(fā)揮下，用到自己的項(xiàng)目中去吧

總結(jié)

以上是生活随笔為你收集整理的html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。