프런트 엔드 페이지에 왼쪽 및 오른쪽 스윙 광고 구현

이번에는 프런트엔드 왼쪽, 오른쪽 스윙광고 구현에 대해 알려드리겠습니다. 프런트엔드 왼쪽, 오른쪽 스윙광고 구현 시 주의사항은 무엇인가요? .

코드 해석

돔 정의, 컨테이너에는 게시판, 게시판을 걸기 위한 끈 및 로프를 고정하기 위한 3개의 압정이 포함되어 있습니다.

<p class="signboard">
    <p class="sign">THANKS</p>
    <p class="strings"></p>
    <p class="pin top"></p>
    <p class="pin left"></p>
    <p class="pin right"></p>
</p>

중앙 디스플레이:

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center 60%, white, sandybrown);
}

게시판의 전체 크기를 정의합니다.

.signboard {
    width: 400px;
    height: 300px;
}

보드 스타일 설정:

.signboard {
    position: relative;
}
.sign {
    width: 100%;
    height: 200px;
    background: burlywood;
    border-radius: 15px;
    position: absolute;
    bottom: 0;
}

조각 효과로 텍스트 스타일 설정:

.sign {
    color: saddlebrown;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3),
                0 -2px 0 rgba(0, 0, 0, 0.7);
}

끈 그리기:

.strings {
    width: 150px;
    height: 150px;
    border: 5px solid brown;
    position: absolute;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
    top: 38px;
    left: 122px;
}

끈 상단에 압정 그리기:

.pin {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
}
.pin.top {
    background: gray;
    left: 187px;
}

왼쪽에 압핀 그리기 그리고 보드의 오른쪽:

.pin.left,
.pin.right {
    background: brown;
    top: 110px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}
.pin.left {
    left: 80px;
}
.pin.right {
    right: 80px;
}

마지막으로 간판을 흔들어 보세요:
(상단 압정을 회전축으로 사용하라는 Xiao Leilei의 제안에 따라 수정되었으며, 이는 원래 효과보다 좋습니다.)

.signboard {
    animation: swing 1.5s ease-in-out infinite alternate;
    transform-origin: 200px 13px;
}
@keyframes swing {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

이제 끝났습니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS에서 인터페이스를 사용하는 단계에 대한 자세한 설명

선택한 li 강조 표시 단계의 React 구현

위 내용은 프런트 엔드 페이지에 왼쪽 및 오른쪽 스윙 광고 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!