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

鼠標(biāo)移入最終的效果

動態(tài)效果三：
Html
<div class="xbtn1">
<a href="">
了解更多
</a>
</div>
Css
.xbtn1 a{
position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 50px;
    line-height: 50px;
    max-width: 150px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px solid currentColor;
    color: #FFFFFF;
}
.xbtn1 a:after{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: #FFFFFF transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.xbtn1 a:hover:after {
    border-width: 330px 330px 0 0;
}
.xbtn1 a:hover{
color: #1b3952;
}
動態(tài)效果四：
Html
<div class="xbtn2">
<a href="">
了解更多
</a>
</div>
 
Css
.xbtn2 a{
position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 50px;
    line-height: 50px;
    max-width: 150px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px solid currentColor;
}
.xbtn2 a:before{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #1b3952;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.xbtn2 a:after{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent #1b3952 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.xbtn2 a:hover {
    color: #FFFFFF;
}
.xbtn2 a:hover:before {
    border-width: 150px 0 0 150px;
}
.xbtn2 a:hover:after {
    border-width: 0 0 150px 150px;
}
接下來動態(tài)效果五，這種動態(tài)效果是鼠標(biāo)移入，出現(xiàn)背景和水波紋的效果，如下圖是最開始的樣式，關(guān)于分享的圖標(biāo)是用切了顏色不一樣的兩張圖標(biāo)，一張是白色，一張是黑色，黑色圖標(biāo)是輸入移入之后的效果，圖標(biāo)的背景變白色，周圍出現(xiàn)的波紋，主要用偽類實(shí)現(xiàn)的。

下面是鼠標(biāo)移入的效果


 
Html
<div class="foot-share">
<ul>
<li>
<a href="">
<img src="images/img1.png" class="ic1"/>
<img src="images/img1a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img2.png" class="ic1"/>
<img src="images/img2a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img3.png" class="ic1"/>
<img src="images/img3a.png" class="ic2"/>
</a>
</li>
<li>
<a href="">
<img src="images/img4.png" class="ic1"/>
<img src="images/img4a.png" class="ic2"/>
</a>
</li>
</ul>
</div>
下面關(guān)于樣式有點(diǎn)多，主要的樣式是關(guān)于偽類做的波紋