HTML CSS와 자바스크립트를 사용하여 스위치를 재미있게 전환하세요-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트를 사용하여 스위치를 재미있게 전환하세요

Patricia Arquette

풀어 주다： 2024-12-05 14:20:13

원래의

911명이 탐색했습니다.

Toggle Switches fun 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;
            배경색: #121212;
            색상: #fff;
            글꼴 모음: Arial, sans-serif;
        }
        .toggle-컨테이너 {
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            여백: 20px 0;
        }
        .토글 라벨 {
            왼쪽 여백: 10px;
            글꼴 크기: 1.2rem;
            배경색: rgb(64, 109, 94);
            패딩: 5px;

        }
        .스위치 {
            위치: 상대;
            디스플레이: 인라인 블록;
            너비: 50px;
            높이: 25px;
        }
        .스위치 입력 {
            불투명도: 0;
            너비: 0;
            높이: 0;
        }
        .슬라이더 {
            위치: 절대;
            커서: 포인터;
            상단: 0;
            왼쪽: 0;
            오른쪽: 0;
            하단: 0;
            배경색: #555;
            테두리 반경: 25px;
            전환: 0.4초;
        }
        .slider:이전 {
            위치: 절대;
            콘텐츠: "";
            높이: 20px;
            너비: 20px;
            왼쪽: 3px;
            하단: 2.5px;
            배경색: 흰색;
            테두리 반경: 50%;
            전환: 0.4초;
        }
        입력:확인됨 .slider {
            배경색: #4caf50;
        }
        입력:확인됨 .slider:이전 {
            변환: 번역X(24px);
        }
        .상자{
            높이: 250px;
            너비: 300px;
            배경색: rgb(8, 72, 51);
            테두리 반경: 10px;
            패딩:5px;
        }
    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용하여 스위치를 재미있게 전환하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!