網站前端制作之鼠標經過按鈕效果二

　　接著上次關于頁面布局中，內容模塊里的按鈕，鼠標經過的動畫效果的總結。鼠標經過的按鈕的時候會觸發各種效果，如漸變、放大、旋轉抑或是翻轉等效果。

　　開始的按鈕樣式，如下圖鼠標移入最終的效果動態效果三：

　　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;

　　}

　　動態效果四：

　　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;

　　}

　　接下來動態效果五，這種動態效果是鼠標移入，出現背景和水波紋的效果，如下圖是最開始的樣式，關于分享的圖標是用切了顏色不一樣的兩張圖標，一張是白色，一張是黑色，黑標是輸入移入之后的效果，圖標的背景變白色，周圍出現的波紋，主要用偽類實現的。下面是鼠標移入的效果

　　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

　　/

　　下面關于樣式有點多，主要的樣式是關于偽類做的波紋