순수 CSS를 사용하여 나비 표본의 표시 프레임 효과를 얻는 방법-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-09-04 11:40:10

원래의

2329명이 탐색했습니다.

이 글의 내용은 순수 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);
}

로그인 후 복사

#🎜🎜 #완료!