网站前端制作之鼠标经过按钮效果二

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

开始的按钮样式，如下图

鼠标移入最终的效果

动态效果三：

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>

下面关于样式有点多，主要的样式是关于伪类做的波纹