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