CSS3 의사 요소를 통해 점차적으로 빛나는 테두리에 대한 자세한 코드 설명

이 글은 점차 빛나는 사각형 테두리를 구현하기 위해 CSS3 의사 요소를 사용하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글은 여러분이 필요로 하는 모든 사람을 위한 특정 참조 및 학습 가치를 제공합니다. 친구야, 함께 살펴보자.

이 글에서는 경계선의 점진적인 빛을 구현하기 위해 유사 요소를 사용하는 코드를 소개합니다. 주로 규모와 불투명도라는 두 가지 속성 을 사용합니다. 자세한 소개를 살펴보겠습니다.

렌더링은 다음과 같습니다.

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)

는 점차 정사각형을 형성합니다. 중앙에서 모서리까지 빛납니다: 불투명도:0에서 불투명도:1.

다른 사람들은 기술이 없습니다.

스케일 소개

scale([, ]): 객체 의 2D 스케일을 지정합니다(2D 스케일링) . 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 첫 번째 매개변수의 값이 기본으로 사용됩니다.

scaleX(): 객체의 X축의 (수평) 배율을 지정합니다

scaleY(< ;number>): 객체의 Y축의 (수직) 배율 지정

요약

[관련 권장 사항]

1. CSS3 무료 동영상 튜토리얼

2. CSS3로 이미지의 로우폴리곤 애니메이션 효과를 완성하는 과정에 대한 자세한 설명

3. CSS를 사용하여 표준 원형 패턴을 그리는 방법을 배웁니다.

4. CSS를 사용하여 텍스트 하이퍼링크 오른쪽에 화살표 아이콘 추가

5. H5 및 CSS3 양식 유효성 검사에 대한 튜토리얼

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