집 >웹 프론트엔드 >JS 튜토리얼 >핵심 HTML 및 핵심 CSS 코드를 사용하여 현실적인 환상 전환 전환

핵심 HTML 및 핵심 CSS 코드를 사용하여 현실적인 환상 전환 전환

Patricia Arquette원래의: 2024-12-05 19:12:10757검색

Toggle Switch Realistic illusion using the core html and core Css Code

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>인터랙티브 유리 카드</title>
  <스타일>
.스위치 {
  위치: 상대;
  너비: 210px;
  높이: 50px;
  -webkit-box-sizing: 테두리 상자;
  상자 크기 조정: 테두리 상자;
  패딩: 3px;
  배경: #0d0d0d;
  테두리 반경: 6px;
  -웹킷-박스-섀도:
    삽입 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
  상자 그림자:
    삽입 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.스위치 입력[type="checkbox"] {
  위치: 절대;
  Z-색인: 1;
  너비: 100%;
  높이: 100%;
  불투명도: 0;
  커서: 포인터;
}
.switch input[type="checkbox"] 라벨 {
  위치: 상대;
  디스플레이: 블록;
  왼쪽: 0;
  너비: 50%;
  높이: 100%;
  배경: #1b1c1c;
  테두리 반경: 3px;
  -webkit-box-shadow: 삽입 0 1px 0 0 rgba(255, 255, 255, 0.1);
  상자 그림자: 삽입 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition: 모두 0.5초의 easy-in-out;
  전환: 모두 0.5초 Ease-In-Out;
}
.switch input[type="checkbox"] 라벨:이전 {
  콘텐츠: "";
  디스플레이: 인라인 블록;
  너비: 5px;
  높이: 5px;
  왼쪽 여백: 10px;
  배경: #fff;
  테두리 반경: 50%;
  수직 정렬: 중간;
  -웹킷-박스-섀도:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  상자 그림자:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  -webkit-transition: 모두 0.5초의 easy-in-out;
  전환: 모두 0.5초 Ease-In-Out;
}
.switch input[type="checkbox"] 라벨:이후 {
  콘텐츠: "";
  디스플레이: 인라인 블록;
  너비: 0;
  높이: 100%;
  수직 정렬: 중간;
}
.switch input[type="checkbox"] 라벨 i {
  디스플레이: 블록;
  위치: 절대;
  최고: 50%;
  왼쪽: 50%;
  너비: 3px;
  높이: 24px;
  여백 상단: -12px;
  여백 왼쪽: -1.5px;
  테두리 반경: 2px;
  배경: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  상자 그림자: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] 라벨 i:이전,
.switch input[type="checkbox"] 라벨 i:after {
  콘텐츠: "";
  디스플레이: 블록;
  위치: 절대;
  너비: 100%;
  높이: 100%;
  테두리 반경: 2px;
  배경: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  상자 그림자: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] 라벨 i:before {
  왼쪽: -7px;
}
.switch input[type="checkbox"] 라벨 i:after {
  왼쪽: 7px;
}
.switch input[type="checkbox"]:checked 라벨 {
  왼쪽: 50%;
}
.switch input[type="checkbox"]:checked label:before {
  -웹킷-박스-섀도:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
  상자 그림자:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
}</스타일>
</머리>
<본문>
  <div>

위 내용은 핵심 HTML 및 핵심 CSS 코드를 사용하여 현실적인 환상 전환 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html webkit switch checkbox using pointer display position margin padding border viewport background transition input

성명：