接着上次□□□关于页面□□□布局中，内容模块◆里的按钮，鼠标经过□□□□的动画效□□果的总结。鼠标经过□□□□的按钮的□□□□时候会触□□□□发各种效□□□果，如渐变、放大、旋转抑或♦是翻转等□□□效果。
开始的按钮样式，如下图

鼠标移入最终的效果

动态效果三：
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;
}
动态效果四：
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;
}
接下来动□□□态效果五，这种动态□□□效果是鼠□□□标移入，出现背景□□和水波纹□□的效果，如下图是□□□□最开始的◥样式，关于分享□□的图标是✦用切了颜□□□色不一样☆的两张图□□□标，一张是白◥色，一张是黑◢色，黑色图标★是输入移丨入之后的◢效果，图标的背□□□□景变白色，周围出现□□□□的波纹，主要用伪○类实现的。

下面是鼠标移入的效果


 
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>
下面关于样式有点多，主要的样式是关于伪类做的波纹