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

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!