純css3實現(xiàn)的鼠標懸停動畫按鈕
發(fā)布時間：2014-12-23 15:26:39 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純css3實現(xiàn)的鼠標懸停動畫按鈕,需要的朋友可以參考下
今天給大家?guī)硪豢罴僣ss3實現(xiàn)的鼠標懸停動畫按鈕。這款按鈕鼠標經(jīng)過前以正方形的形式，當鼠標經(jīng)過的時候以動畫的形式變成圓形。效果圖如下：
實現(xiàn)的代碼。
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);
}
非常棒的鼠標懸停特效吧，最重要的是完全是純CSS3來實現(xiàn)的，小伙伴們自由發(fā)揮下，用到自己的項目中去吧
相關(guān)文章
純CSS3實現(xiàn)的鼠標懸停圖標旋轉(zhuǎn)導航動畫特效源碼
是一款將鼠標放在圖標上時，該圖標會立即產(chǎn)生旋轉(zhuǎn)動畫效果的代碼，本段代碼適應于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-06-10
純css3實現(xiàn)的鼠標懸停背景翻轉(zhuǎn)動畫導航特效源碼
今天的這款純css3實現(xiàn)的鼠標懸停背景翻轉(zhuǎn)動畫導航特效源碼，鼠標懸停背景圖片翻轉(zhuǎn)，無需js，只要一部分的css3代碼即可，其他的都是普通的css2代碼2015-02-03
一款純CSS3實現(xiàn)的鼠標懸停動畫按鈕集合特效源碼
這次要分享的也是一款不錯的CSS3動畫按鈕，當我們將鼠標滑過按鈕時，按鈕會展現(xiàn)不同方式的動畫效果，大家可以具體看看演示2015-02-03
HTML5+CSS3實現(xiàn)的鼠標懸停動畫菜單按鈕特效源碼
今天要給給位分享一款基于CSS3的鼠標懸停動畫菜單按鈕，這款菜單是由一個個小按鈕組成，當我們將鼠標滑過菜單項時，按鈕上的圖標將出現(xiàn)懸浮的動畫特效2015-02-02- 之前介紹過很多款css3實現(xiàn)的鼠標懸停特效，今天再和大家分享一款純css3實現(xiàn)的鼠標懸停動畫按鈕。這款按鈕鼠標經(jīng)過前以正方形的形式，當鼠標經(jīng)過的時候以動畫的形式變成圓形2014-12-29
一款基于CSS3實現(xiàn)的鼠標懸停圖片動畫及多種文字動畫效果源碼
這是一款基于CSS3的圖片鼠標懸停動畫，這款CSS3應用的特點是當鼠標移動至圖片上方時，在圖片上將會出現(xiàn)自定義的動畫，可以是文字動畫、圖標動畫等2014-12-08
今天小編為大家?guī)淼氖?1款純css3實現(xiàn)的鼠標懸停動畫效果源碼，總共有31種不同的動畫效果，包括放大、縮小、陰影、各個方向旋轉(zhuǎn)、翻轉(zhuǎn)、等等2014-12-01
純CSS3實現(xiàn)的鼠標懸停圖片文字動畫效果源碼是使用css3來實現(xiàn)的，加載速度更快，內(nèi)存占用更低，使用更加簡便。并且不支持低版本瀏覽器2014-11-21
CSS3鼠標懸停動畫顯示文字特效源碼，鼠標移動到圖片上面的時候滑動顯示出標題文字信息。本段代碼可以在各個網(wǎng)頁使用，有需要的朋友可以直接下載使用2017-08-11
