> 웹 프론트엔드 > JS 튜토리얼 > HTML CSS와 자바스크립트를 사용하여 스위치를 재미있게 전환하세요

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿