순수 CSS를 사용하여 나비 표본의 표시 프레임 효과를 얻는 방법

이 글의 내용은 순수 CSS를 사용하여 나비 표본의 표시 프레임 효과를 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고하면 좋겠습니다. 당신에게.

효과 미리보기

소스코드 다운로드

Every 일일 프론트엔드 실습 시리즈의 모든 소스 코드를 github에서 다운로드하세요:

https://github.com/comehope/front-end-daily-challenges

코드 해석#🎜 🎜#

돔 정의. 컨테이너는 나비 전체를 나타냅니다. 나비는 대칭이므로 각 면에는 3개의 하위 요소가 있습니다.

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

#🎜 🎜#가운데 표시:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(gray, lightyellow, gray);
}

나비 크기 정의:

.butterfly {
    position: relative;
    width: 10em;
    height: 10em;
}

왼쪽 절반 먼저 그리기:

.butterfly .left {
    position: absolute;
    width: inherit;
    height: inherit;
}

첫 번째 하위 요소 사용 날개의 윗부분 그리기:

.butterfly span {
    position: absolute;
    border-radius: 50%;
}

.butterfly span:nth-child(1) {
    width: 5em;
    height: 7em;
    background-color: gold;
}

두 번째 하위 요소를 사용하여 날개의 아랫부분 그리기:

.butterfly span:nth-child(2) {
    width: 5.5em;
    height: 3.5em;
    background-color: orangered;
    top: 5em;
    left: -2.5em;
    filter: opacity(0.6);
}

세 번째 하위 요소를 사용하여 그리기 촉수:

.butterfly span:nth-child(3) {
    width: 6em;
    height: 6em;
    border-right: 0.3em solid orangered;
    top: -0.5em;
}

왼쪽 절반 부분을 오른쪽 절반으로 복사:

.butterfly .right {
    position: absolute;
    width: inherit;
    height: inherit;
}

.butterfly .right {
    transform: rotateY(180deg) rotate(-90deg);
    top: 0.4em;
    left: 0.4em;
}

시료를 디스플레이 프레임에 설치:

.butterfly::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: -2.5em;
    left: -8em;
    width: 24em;
    height: 18em;
    background-color: black;
      border: 0.2em inset silver;
}

.butterfly::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 40em;
    height: 30em;
    background-color: lightyellow;
    top: -9em;
    left: -16em;
    border: 2em solid burlywood;
    border-radius: 3em;
    box-shadow: 
        0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3),
        inset 0.4em 0.4em 0.1em 0.5em rgba(0, 0, 0, .4);
    z-index: -1;
}

마지막으로, 패턴의 기울기로 인한 변위 조정:

.butterfly {
    transform: translateX(1em);
}

#🎜🎜 #완료!

관련 권장 사항:

순수한 CSS를 사용하여 Windows 시작 인터페이스의 애니메이션 효과를 얻는 방법

순수 CSS를 사용하는 방법 단일 요소 맥도날드 로고 구현(소스 코드 포함)

위 내용은 순수 CSS를 사용하여 나비 표본의 표시 프레임 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!