一款純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;
- bottombottom: 0px;
- left: 0px;
- rightright: 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);
- }
相關(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)頁(yè)使用,有興趣的朋友們可以前來下載使用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)懸停動(dòng)畫按鈕,需要的朋友可以參考下2014-12-23一款基于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)頁(yè)使用,有需要的朋友可以直接下載使用2017-08-11