網(wǎng)站前端制作之鼠標(biāo)經(jīng)過(guò)按鈕效果二

　　接著上次關(guān)于頁(yè)面布局中，內(nèi)容模塊里的按鈕，鼠標(biāo)經(jīng)過(guò)的動(dòng)畫效果的總結(jié)。鼠標(biāo)經(jīng)過(guò)的按鈕的時(shí)候會(huì)觸發(fā)各種效果，如漸變、放大、旋轉(zhuǎn)抑或是翻轉(zhuǎn)等效果。

　　開始的按鈕樣式，如下圖鼠標(biāo)移入最終的效果動(dòng)態(tài)效果三：

　　Html

　　pclass=xbtn1

　　ahref=

　　了解更多

　　/a

　　/

　　Css

　　.xbtn1a{

　　position：relative;

　　display：block;

　　margin：20pxauto;

　　width：100%;

　　height：50px;

　　max-width：150px;

　　text-align：center;

　　text-transform：uppercase;

　　overflow：hidden;

　　border：1pxsolidcurrentColor;

　　color：#FFFFFF;

　　}

　　.xbtn1a：after{

　　content：'';

　　width：0;

　　height：0;

　　-webkit-transform：rotate(360deg);

　　-webkit-transition：0.5s;

　　transition：0.5s;

　　border-style：solid;

　　border-width：0000;

　　border-color：#FFFFFFtransparenttransparenttransparent;

　　position：absolute;

　　top：0;

　　z-index：-1;

　　}

　　.xbtn1a：hover：after{

　　border-width：330px330px00;

　　}

　　.xbtn1a：hover{

　　color：#1b3952;

　　}

　　動(dòng)態(tài)效果四：

　　Html

　　pclass=xbtn2

　　ahref=

　　了解更多

　　/a

　　/

　　Css

　　.xbtn2a{

　　position：relative;

　　display：block;

　　margin：20pxauto;

　　width：100%;

　　height：50px;

　　max-width：150px;

　　text-align：center;

　　text-transform：uppercase;

　　overflow：hidden;

　　border：1pxsolidcurrentColor;

　　}

　　.xbtn2a：before{

　　content：'';

　　width：0;

　　height：0;

　　-webkit-transform：rotate(360deg);

　　-webkit-transition：0.5s;

　　transition：0.5s;

　　border-style：solid;

　　border-width：0000;

　　border-color：transparenttransparenttransparent#1b3952;

　　position：absolute;

　　bottom：0;

　　z-index：-1;

　　}

　　.xbtn2a：after{

　　content：'';

　　width：0;

　　height：0;

　　-webkit-transform：rotate(360deg);

　　-webkit-transition：0.5s;

　　transition：0.5s;

　　border-style：solid;

　　border-width：0000;

　　border-color：transparenttransparent#1b3952transparent;

　　position：absolute;

　　right：0;

　　bottom：0;

　　z-index：-1;

　　}

　　.xbtn2a：hover{

　　color：#FFFFFF;

　　}

　　.xbtn2a：hover：before{

　　border-width：150px00150px;

　　}

　　.xbtn2a：hover：after{

　　border-width：00150px150px;

　　}

　　接下來(lái)動(dòng)態(tài)效果五，這種動(dòng)態(tài)效果是鼠標(biāo)移入，出現(xiàn)背景和水波紋的效果，如下圖是最開始的樣式，關(guān)于分享的圖標(biāo)是用切了顏色不一樣的兩張圖標(biāo)，一張是白色，一張是黑色，黑標(biāo)是輸入移入之后的效果，圖標(biāo)的背景變白色，周圍出現(xiàn)的波紋，主要用偽類實(shí)現(xiàn)的。下面是鼠標(biāo)移入的效果

　　Html

　　pclass=foot-share

　　ul

　　ahref=

　　imgsrc=images/img

　　1.pngclass=ic1/

　　imgsrc=images/img1a.pngclass=ic2/

　　/a

　　/li

　　ahref=

　　imgsrc=images/img

　　2.pngclass=ic1/

　　imgsrc=images/img2a.pngclass=ic2/

　　/a

　　/li

　　ahref=

　　imgsrc=images/img

　　3.pngclass=ic1/

　　imgsrc=images/img3a.pngclass=ic2/

　　/a

　　/li

　　ahref=

　　imgsrc=images/img

　　4.pngclass=ic1/

　　imgsrc=images/img4a.pngclass=ic2/

　　/a

　　/li

　　/ul

　　/

　　下面關(guān)于樣式有點(diǎn)多，主要的樣式是關(guān)于偽類做的波紋