純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代碼:
<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);
}
非常棒的鼠標(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-03HTML5+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-0831款純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)存占用更低,使用更加簡(jiǎn)便。并且不支持低版本瀏覽器2014-11-21CSS3鼠標(biāo)懸停動(dòng)畫顯示文字特效源碼
CSS3鼠標(biāo)懸停動(dòng)畫顯示文字特效源碼,鼠標(biāo)移動(dòng)到圖片上面的時(shí)候滑動(dòng)顯示出標(biāo)題文字信息。本段代碼可以在各個(gè)網(wǎng)頁使用,有需要的朋友可以直接下載使用2017-08-11