HTML CSS와 자바스크립트를 이용한 스마트 스크린 애니메이션
- Linda Hamilton원래의
- 2024-11-21 13:52:35795검색
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.