400-800-9385
网站建设资讯详细

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

发表日期:2021-05-09 12:26:20   作者来源:林志平   浏览:980   标签:前端制作开发    
接着上次关于页面布局中,内容模块里的按钮,鼠标经过的动画效果的总结。鼠标经过的按钮的时候会触发各种效果,如渐变、放大、旋转抑或是翻转等效果。
开始的按钮样式,如下图

前端效果1

鼠标移入最终的效果

前端效果2

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

前端效果3

下面是鼠标移入的效果

前端效果4
 
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>
下面关于样式有点多,主要的样式是关于伪类做的波纹

前端效果5

前端效果6

前端效果7

 
 
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6040.html
前端相关公司评论
  • 2.驻点数据软件工程师、前端工程师、后端工程师、云业务专员(技术类岗位聘用人员为公司正式职工):试用期2个月,试用期工资按照转正工资的80%发放(试用期即签订正式劳动合同,开始购买社会保险);...
    思茅开发网站公司
  • 为什么说学习前端知识很有必要呢?一般情况下,ui设计师负责设计页面,然后和前端对接,如果ui人员不了解前端基本知识,那沟通难度就会很大。另外,ui设计师了解前端知识,也可以独...
    遵义系统开发公司