>  기사  >  웹 프론트엔드  >  점진적으로 빛나는 사각형 테두리를 구현하기 위해 CSS3 의사 요소를 사용하는 방법에 대한 자세한 설명

점진적으로 빛나는 사각형 테두리를 구현하기 위해 CSS3 의사 요소를 사용하는 방법에 대한 자세한 설명

怪我咯
怪我咯원래의
2017-05-29 09:48:491593검색

这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

本文介绍的是一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍:

效果图如下:

HTML代码:

<p class="light">
 <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
 <p class="light-inner">
  <p>前端开发博客</p>
  <p>关注前端开发</p>
 </p>
</p>

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(d80b5def5ed1be6e26d91c2709f14170[, d80b5def5ed1be6e26d91c2709f14170]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX(d80b5def5ed1be6e26d91c2709f14170):指定对象X轴的(水平方向)缩放

scaleY(d80b5def5ed1be6e26d91c2709f14170):指定对象Y轴的(垂直方向)缩放

위 내용은 점진적으로 빛나는 사각형 테두리를 구현하기 위해 CSS3 의사 요소를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.