css3를 사용하여 웹페이지에 다섯개 별 스타일 구현(원리 분석)

이 글의 내용은 CSS3를 사용하여 웹페이지에 다섯개 별 스타일을 구현하는 내용입니다. 참고할 만한 내용이 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

우리가 웹페이지에서 흔히 볼 수 있는 다양한 그래픽에는 정사각형, 직사각형, 삼각형, 원 등이 있습니다. 대부분은 CSS3나 배경 이미지를 사용하여 구현됩니다. 그러나 개발 과정에서 배경 가로채기를 사용하는 데 몇 가지 문제가 있습니다. 추가 요청이 필요한 이미지, 더 높은 이미지 픽셀 요구 사항 등 많은 단점이 있어 CSS3가 더욱 주류 구현 방법이 되었습니다. 이제 의사 요소의 사용법과 다섯개 별을 그려 변환하는 방법을 보여 드리겠습니다.

css3를 이용한 오각별 스타일 구현의 원리

삼각형 스타일을 구현하기 위해 먼저 모서리가 크고 콘텐츠 크기가 0인 요소를 사용합니다. (자세한 내용은 주의해주세요) css3를 사용합니다 웹 페이지 컬렉션에서 다양한 삼각형 스타일을 구현하려면 ), 그런 다음 의사 요소 :after 및 :before를 사용하여 동일한 크기의 두 삼각형을 복제하고 마지막으로 이 두 의사 요소에 다른 회전 변환을 적용하여 다음과 같은 스타일을 얻습니다. 다섯개의 별.

css3 pseudo-elements

CSS의 주요 목적은 HTML 요소에 스타일을 추가하는 것입니다. 실제로 CSS에는 문서 자체를 방해하지 않고 추가 요소를 추가할 수 있는 기능이 있습니다. 의사 요소. 처음에는 의사 요소의 구문이 ":"였지만 CSS3 개정 이후에는 의사 요소와 의사 클래스(예: :hover, :active 등)를 구별하기 위해 "::"을 일률적으로 사용했습니다. 이 기사에서는 before와 :after라는 두 가지 가상 요소를 참조합니다. :before는 콘텐츠 앞에 요소를 추가하고 :after는 콘텐츠 뒤에 요소를 추가합니다(그들 사이에 콘텐츠를 추가하려면 content 속성을 사용할 수 있습니다).

css3의 새로운 속성 변환

변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. 이 문서에서는 변환을 사용하여 두 개의 복제된 삼각형을 서로 다른 방향으로 회전합니다.

css3을 사용하여 다섯개 별 스타일을 구현하는 단계 및 구현 코드

1단계: 삼각형 만들기

.tri {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

2단계: 의사 요소 사용: after 및 :before 2개 복제 같은 크기의 삼각형

.tri:after,.tri:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

3단계: 위의 두 의사 요소를 서로 다른 방향으로 70° 회전합니다.

.tri:before {
    transform: rotate(70deg);
}
.tri:after {
    transform: rotate(-70deg);
}

css3를 사용하여 그림과 같이 다섯개 별 스타일 효과를 얻습니다

위 내용은 css3를 사용하여 웹페이지에 다섯개 별 스타일 구현(원리 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!