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

网站前端制作之css按钮动画效果

发表日期:2021-10-09 15:03:13   作者来源:林志平   浏览:161   标签:网站前端制作    
了解更多的按钮是很多网站页面的组成部分,为了使设计出来的页面更加美观,按钮的外观设计也重要,按钮需要实现的鼠标效应效果主要有默认和悬停状态,添加鼠标悬停,可以丰富优化按钮的设计,也可以吸引用户注意力,提升用户体验。鼠标的默认效果大多都是按照设计图上的效果实现,鼠标的悬停时按钮从默认效果到悬停状态的效果的转换效果,可以做到的效果有很多种,例如下面的三种效果:
Html:
效果一是当鼠标悬停的时候,背景色从中间往左右两边扩散。
了解更多按钮的样式效果如下图:

前端图例1

Css:
.combtn{
text-align: center;
}
.combtn a{
position: relative;
z-index: 1;
display: inline-block;
min-width: 150px;
height: 50px;
line-height: 48px;
border: #666666 solid 1px;
color: #323333;
font-size: 18px;
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
}
.combtn a:hover{
color: #FFFFFF;
border: #85b79a solid 1px;
}
.combtn a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #85b79a;
z-index: -1;
opacity: 0;
-webkit-transform: scale3d(0.7, 1, 1);
    transform: scale3d(0.7, 1, 1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.combtn a:hover::before{
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
效果二是当鼠标悬停的时候,白色线框出现在按钮里面的四周。
了解更多按钮的样式效果如下图:
前端图例2
Css:
.combtn{
text-align: center;
}
.combtn a{
min-width: 150px;
height: 50px;
line-height: 50px;
color: #FFFFFF;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: #85b79a;
}
.combtn a:before {
   content: '';
   position: absolute;
   border: white solid 4px;
   top: 4px;
   left: 4px;
   right: 4px;
   bottom: 4px;
   opacity: 0;
  -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: opacity;
   transition-property: opacity;
}
.combtn a:hover:before, .combtn a:focus:before, .combtn a:active:before {
   opacity: 1;
}
效果三是当鼠标悬停的时候,白色线框出现在按钮外面的四周。跟上面效果二的效果有些相似,效果二是白色线框在按钮里面,效果三是绿色线框在按钮在外面四周。
了解更多按钮的样式效果如下图:
前端图例3
 
Css:
.combtn{
text-align: center;
}
.combtn a{
min-width: 150px;
height: 50px;
line-height: 50px;
color: #FFFFFF;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: #85b79a;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.combtn a:before {
   content: '';
   position: absolute;
   border: #85b79a solid 4px;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: top, right, bottom, left;
   transition-property: top, right, bottom, left;
}
.combtn a:hover:before, .combtn a:focus:before, .combtn a:active:before {
   top: -8px;
   right: -8px;
   bottom: -8px;
   left: -8px;
}
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6240.html
相关网站设计案例
前端相关公司评论
  • 2.驻点数据软件工程师、前端工程师、后端工程师、云业务专员(技术类岗位聘用人员为公司正式职工):试用期2个月,试用期工资按照转正工资的80%发放(试用期即签订正式劳动合同,开始购买社会保险);...
    思茅开发网站公司
  • 为什么说学习前端知识很有必要呢?一般情况下,ui设计师负责设计页面,然后和前端对接,如果ui人员不了解前端基本知识,那沟通难度就会很大。另外,ui设计师了解前端知识,也可以独...
    遵义系统开发公司