공지사항 HTML CSS와 자바스크립트를 활용한 현실적인 환상 https://www.instagram.com/webstreet

공지사항 HTML CSS와 자바스크립트를 활용한 현실적인 환상 https://www.instagram.com/webstreet_code/

Mary-Kate Olsen

풀어 주다： 2024-11-21 02:53:10

원래의

385명이 탐색했습니다.

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

인스타그램 팔로우: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>게시판</title>
    <스타일>
        @import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');

        몸 {
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            글꼴 계열: 'Arial', 산세리프;
            여백: 0;
            배경색: #f0f0f0;
        }

        .게시판 {
            디스플레이: 플렉스;
            플렉스 랩: 랩;
            justify-content: 공백 주변;
            항목 정렬: 중앙;
            너비: 80%;
            높이: 80vh;
            간격: 20px;
            패딩: 20px;
            배경색: #54290a; /* 갈색 배경 */
            테두리: 10px 단색 #6b3e1b; /* 더 어두운 갈색 테두리 */
            테두리 반경: 12px;
            상자 그림자: 0 20px 35px rgba(0, 0, 0, 0.4);
        }

        .알아채다 {
            너비: 200px;
            높이: 170px;
            배경색: #f5f5dc;
            패딩: 15px;
            위치: 상대;
            상자 그림자: 0 4px 10px rgba(0, 0, 0, 0.2);
            테두리 반경: 10px;
            전환: 변환 0.3초 용이성, 상자 그림자 0.3초 용이성;
            글꼴 모음: '빛 속으로의 그림자', 필기체;
            글꼴 크기: 1.1rem;
            색상: #333;
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            내용 정당화: 센터;
            텍스트 정렬: 중앙;
            변환: 회전(-5deg); /* 초기 왜곡 효과 */
        }

        .notice:hover {
            변환: 번역Y(-8px) 회전(-3deg);
            상자 그림자: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .핀 {
            위치: 절대;
            상단: -8px;
            왼쪽: 50%;
            변환: 번역X(-50%);
            너비: 18px;
            높이: 18px;
            배경색: 빨간색;
            테두리 반경: 50%;
            상자 그림자: 0 4px 8px rgba(0, 0, 0, 0.3);
            Z-색인: 1;
        }

        /* 각 알림에 고유한 기울어짐 및 배경색 추가 */
        .notice:nth-child(1) {
            배경색: #FFECB3; /* 밝은 노란색 */
            변환: 회전(-2deg);
        }

        .notice:nth-child(2) {
            배경색: #C8E6C9; /* 밝은 녹색 */
            변환: 회전(2deg);
        }

        .notice:nth-child(3) {
            배경색: #FFCDD2; /* 밝은 분홍색 */
            변환: 회전(-4deg);
        }

        .notice:nth-child(4) {
            배경색: #D1C4E9; /* 라벤더 */
            변환: 회전(3deg);
        }

    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 공지사항 HTML CSS와 자바스크립트를 활용한 현실적인 환상 https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!