HTML CSS와 자바스크립트를 이용한 스마트 스크린 애니메이션-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트를 이용한 스마트 스크린 애니메이션

Linda Hamilton

풀어 주다： 2024-11-21 13:52:35

원래의

795명이 탐색했습니다.

Smart Screen Animation using html css and javascript

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>스마트 스크린 메뉴</title>
    <스타일>
        몸 {
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            배경색: #1c1c1e;
            여백: 0;
            오버플로: 숨김;
        }

        .menu-컨테이너 {
            위치: 상대;
            너비: 250px;
            높이: 250px;
        }

        .배경원 {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            변환: 변환(-50%, -50%) 스케일(0);
            너비: 200px;
            높이: 200px;
            배경색: #ffffff30;
            테두리 반경: 50%;
            전환: 0.4초 완화 변환;
        }

        .center-btn {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            변환: 변환(-50%, -50%);
            너비: 60px;
            높이: 60px;
            배경색: #009688; /* 청록색 */
            테두리 반경: 50%;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            색상: #ffffff;
            글꼴 크기: 24px;
            커서: 포인터;
            전환: 변환 0.3초 용이성, 배경색 0.3초 용이성;
        }

        .center-btn.open-icon::이전 {
            콘텐츠: '?'; /* 확장 아이콘 */
        }

        .center-btn.close-icon::이전 {
            콘텐츠: '?'; /* 축소 아이콘 */
        }

        .center-btn:hover {
            변환: 변환(-50%, -50%) 스케일(1.1);
            배경색: #00695c;
        }

        .옵션 {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            변환: 변환(-50%, -50%) 스케일(0);
            너비: 50px;
            높이: 50px;
            배경색: #2c2c2e;
            테두리 반경: 50%;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            색상: #aaa;
            글꼴 크기: 18px;
            커서: 포인터;
            불투명도: 0;
            전환: 모두 0.4초 용이성;
        }

        .옵션.선택됨 {
            배경색: #ffdd59;
            색상: #000;
        }

        .option.selected::이전 {
            콘텐츠: '';
            위치: 절대;
            상단: -15px;
            디스플레이: 블록;
            너비: 5px;
            높이: 5px;
            배경색: #ffdd59;
            테두리 반경: 50%;
        }.option.selected::이후 {
            콘텐츠: '';
            위치: 절대;
            상단: -8px;
            너비: 15px;
            높이: 3px;
            배경색: #ffdd59;
            변환: 번역(-3px, 10px);
        }

        .옵션:호버 {
            배경색: #ffd93d;
            색상: #000;
        }

        /* 외부 원과 중심으로부터의 애니메이션 */
        .menu-container.open .Background-circle {
            변환: 변환(-50%, -50%) scale(1);
        }

        .menu-container.open .option {
            불투명도: 1;
            포인터 이벤트: 모두;
        }

        /* 아이콘의 개별 위치 */
        .brightness { 변환: 번역(-50%, -50%) 번역(-100px, 0); }
        .wifi { 변환: 번역(-50%, -50%) 번역(-70px, -70px); }
        .airplane { 변환: 번역(-50%, -50%) 번역(0, -100px); }
        .bluetooth { 변환: 번역(-50%, -50%) 번역(70px, -70px); }
        .flashlight { 변환: 번역(-50%, -50%) 번역(100px, 0); }
        .location { 변환: 번역(-50%, -50%) 번역(70px, 70px); }
        .dnd { 변환: 번역(-50%, -50%) 번역(0, 100px); }
        .screenshot { 변환: 번역(-50%, -50%) 번역(-70px, 70px); }

        .menu-container.open .brightness { 변환: 번역(-50%, -50%) 번역(-100px, 0) scale(1); }
        .menu-container.open .wifi { 변환: 번역(-50%, -50%) 번역(-70px, -70px) scale(1); }
        .menu-container.open .airplane { 변환: 번역(-50%, -50%) 번역(0, -100px) scale(1); }
        .menu-container.open .bluetooth { 변환: 번역(-50%, -50%) 번역(70px, -70px) scale(1); }
        .menu-container.open .flashlight { 변환: 번역(-50%, -50%) 번역(100px, 0) scale(1); }
        .menu-container.open .location { 변환: 번역(-50%, -50%) 번역(70px, 70px) scale(1); }
        .menu-container.open .dnd { 변환: 번역(-50%, -50%) 번역(0, 100px) scale(1); }
        .menu-container.open .screenshot { 변환: 번역(-50%, -50%) 번역(-70px, 70px) scale(1); }
    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 이용한 스마트 스크린 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!