>  기사  >  웹 프론트엔드  >  점차적으로 빛나는 사각형 테두리 예제의 CSS3 구현

점차적으로 빛나는 사각형 테두리 예제의 CSS3 구현

小云云
小云云원래의
2017-12-13 10:53:282998검색

이 글에서는 주로 scale과 opacity라는 두 가지 속성을 활용하여 테두리의 점진적인 빛을 구현하기 위해 의사 요소를 사용하는 코드를 소개합니다. 자세한 소개를 살펴보겠습니다:

HTML 코드:

CSS 코드:
코드는 다음과 같습니다

= light t0.jpg" />

프론트엔드 개발 블로그

Follow front- 개발 종료

코드는 다음과 같습니다 .light{ 배경:#fff;구현 단계: 주로 .light-inner 의사 요소를 통해 빛나는 사각형: 이전 및 :after 를 사용하여 구현합니다.

너비: 180px;

높이: 180px;

여백: 100pxauto;

위치: 상대;

text-align:center; #333;

변환:translate3d(0,0,0);

}

.light-inner{

패딩:60px30px0;

포인터 이벤트:없음;

위치:절대;

왼쪽:0;

위쪽:0;

아래쪽:0;

오른쪽:0;

text-align:center;

전환: background0.35s;

뒷면 가시성:hidden;

}

.light-inner:before, .light-inner:after{

display:block;

content:"";

position:absolute;

left:30px;

top:30px;

right: 30px;

하단:30px;

테두리:1pxsolid#fff;

불투명도:0;

전환: opacity0.35s, 변환0.35s;

}

.light-inner:before{

border- 왼쪽:0;

테두리 오른쪽:0;

변환:scaleX(0,1);

}

.light-inner:after{

테두리 상단:0;

테두리 하단:0 ;

변환: scaleY(1,0);

}

.light:hover .light-inner{

background:#458fd2

}

.light:hover .light-inner:before, .light :hover .light-inner:after{

불투명도:1;

변환: scale3d(1,1,1);

}

.light-inner p{

전환: 불투명도 .35s, 변환0 .35s;

변환: 번역3d(0,20px,0);

색상:#fff;

불투명도:0;

줄 높이:30px;

}

.light:hover .light-inner p{

변환: 번역3d(0,0,0);

불투명도:1;

}

상하 테두리는 가운데에서 양쪽으로 점차 확장됩니다. scaleX(0)에서 scaleX(1)

왼쪽 및 오른쪽 테두리는 가운데에서 위쪽 및 아래쪽으로 확장됩니다. 측면: scaleY(0)에서 scaleY (1)

은 중앙에서 모서리까지 점차적으로 빛나는 사각형을 형성합니다(불투명도:0에서 불투명도:1).

다른 스킬은 없습니다.

scale 소개

scale(

scale 효과 예제에 대한 자세한 설명

CSS에서 반투명 테두리를 설정하는 방법은 무엇입니까?

위 내용은 점차적으로 빛나는 사각형 테두리 예제의 CSS3 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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