服务热线 400-660-5555

宁波网站建设
首页 站内资讯

宁波网站建设

站内资讯
宁波网站建设 / 站内资讯 / 产品资讯 / 正文

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

来源: All文章
发布时间:2024-06-06 10:07:12

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

  开始的按钮样式,如下图鼠标移入最终的效果动态效果三:

  Html

  pclass=xbtn1

  ahref=

  了解更多

  /a

  /

  Css

  .xbtn1a{

  position:relative;

  display:block;

  margin:20pxauto;

  width:100%;

  height:50px;

ine-height:50px;

  max-width:150px;

  text-align:center;

  text-transform:uppercase;

  overflow:hidden;

  border:1pxsolidcurrentColor;

  color:#FFFFFF;

  }

  .xbtn1a:after{

  content:'';

  width:0;

  height:0;

  -webkit-transform:rotate(360deg);

  -webkit-transition:0.5s;

  transition:0.5s;

  border-style:solid;

  border-width:0000;

  border-color:#FFFFFFtransparenttransparenttransparent;

  position:absolute;

  top:0;

eft:0;

  z-index:-1;

  }

  .xbtn1a:hover:after{

  border-width:330px330px00;

  }

  .xbtn1a:hover{

  color:#1b3952;

  }

  动态效果四:

  Html

  pclass=xbtn2

  ahref=

  了解更多

  /a

  /

  Css

  .xbtn2a{

  position:relative;

  display:block;

  margin:20pxauto;

  width:100%;

  height:50px;

ine-height:50px;

  max-width:150px;

  text-align:center;

  text-transform:uppercase;

  overflow:hidden;

  border:1pxsolidcurrentColor;

  }

  .xbtn2a:before{

  content:'';

  width:0;

  height:0;

  -webkit-transform:rotate(360deg);

  -webkit-transition:0.5s;

  transition:0.5s;

  border-style:solid;

  border-width:0000;

  border-color:transparenttransparenttransparent#1b3952;

  position:absolute;

  bottom:0;

eft:0;

  z-index:-1;

  }

  .xbtn2a:after{

  content:'';

  width:0;

  height:0;

  -webkit-transform:rotate(360deg);

  -webkit-transition:0.5s;

  transition:0.5s;

  border-style:solid;

  border-width:0000;

  border-color:transparenttransparent#1b3952transparent;

  position:absolute;

  right:0;

  bottom:0;

  z-index:-1;

  }

  .xbtn2a:hover{

  color:#FFFFFF;

  }

  .xbtn2a:hover:before{

  border-width:150px00150px;

  }

  .xbtn2a:hover:after{

  border-width:00150px150px;

  }

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

  Html

  pclass=foot-share

  ul

i

  ahref=

  imgsrc=images/img

  1.pngclass=ic1/

  imgsrc=images/img1a.pngclass=ic2/

  /a

  /li

i

  ahref=

  imgsrc=images/img

  2.pngclass=ic1/

  imgsrc=images/img2a.pngclass=ic2/

  /a

  /li

i

  ahref=

  imgsrc=images/img

  3.pngclass=ic1/

  imgsrc=images/img3a.pngclass=ic2/

  /a

  /li

i

  ahref=

  imgsrc=images/img

  4.pngclass=ic1/

  imgsrc=images/img4a.pngclass=ic2/

  /a

  /li

  /ul

  /

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

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-5555

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr