欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何应用CSS3伪元素完成渐渐发光的方格边框功效

来源:本站整理 作者:佚名 时间:2017-09-04 TAG: 我要投稿

本文先容的是一个应用伪元向来完成边框渐渐发光的代码,重要用到scale和opacity这两个属性。上面来看看详细的先容:
后果图以下:

HTML代码:
 class="light">
  src="/Article/UploadPic/2017-9/20179422451942.jpg"/>
  class="light-inner">
 
前端开辟博客
 
存眷前端开辟
 
CSS代码:
.light{
 background: #fff;
 width: 180px;
 height: 180px;
 margin: 100px auto;
 position: relative;
 text-align: center;
 color: #333;
 transform:translate3d(0,0,0);
}
.light-inner{
 padding: 60px 30px 0;
 pointer-events: none;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 text-align: center;
 transition: background 0.35s;
 backface-visibility: hidden;
}
.light-inner:before, .light-inner:after{
 display: block;
 content: "";
 position: absolute;
 left: 30px;
 top: 30px;
 right: 30px;
 bottom: 30px;
 border: 1px solid #fff;
 opacity: 0;
 transition: opacity 0.35s, transform 0.35s;
}
.light-inner:before{
 border-left: 0;
 border-right: 0;
 transform:scaleX(0,1);
}
.light-inner:after{
 border-top: 0;
 border-bottom: 0;
 transform: scaleY(1,0);
}
.light:hover .light-inner{
 background: #458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
 opacity: 1;
 transform: scale3d(1,1,1);
}
.light-inner p{
 transition: opacity .35s, transform 0.35s;
 transform: translate3d(0,20px,0);
 color: #fff;
 opacity: 0;
 line-height: 30px;
}
.light:hover .light-inner p{
 transform: translate3d(0,0,0);
 opacity: 1;
}
完成步调:
发光的方格,主如果经由过程.light-inner的伪元素:before和:after来完成
高低的边框是从中央往双方渐渐睁开:scaleX(0)到scaleX(1)
阁下的边框是从中央往高低双方睁开:scaleY(0)到scaleY(1)
形成为了一个四方形从中央向边角渐渐发光的后果:opacity:0到opacity:1。
别的就没什么技能了。
scale先容
scale([, ]):指定工具的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。假如第二个参数未供给,则默许取第一个参数的值
scaleX():指定工具X轴的(程度偏向)缩放
scaleY():指定工具Y轴的(垂直偏向)缩放
总结
以上便是这篇文章的全体内容了,盼望本文的内容对人人的进修或许事情能带来一定的赞助,假如有疑问人人能够留言交换

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载