今天給大家帶來一款純css3實現的鼠標懸停動畫按鈕。這款按鈕鼠標經過前以正方形的形式，當鼠標經過的時候以動畫的形式變成圓形。效果圖如下：

在線預覽???源碼下載

實現的代碼。

html代碼：

<div><span></span></div>

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

via:http://***/Article/13275

總結

以上是生活随笔為你收集整理的纯css3实现的鼠标悬停动画按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。