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

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

开始的按钮样式，如下图

鼠标移入最终的效果
动态效果三：
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>

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

当前名称：网站前端制作之鼠标经过按钮效果二
网址分享：https://www.cdcxhl.com/news33/241783.html

成都网站建设公司_创新互联，为您提供企业建站、移动网站建设、网站导航、App设计、外贸网站建设、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联