使用 html css 和 javascript 切換樂趣

    
    
    <title>有邏輯的撥動開關</title>
    
        身體 {
            顯示：柔性；
            彈性方向：列；
            對齊項目：居中；
            調整內容：居中；
            高度：100vh；
            背景顏色：#121212；
            顏色：#fff；
            字體系列：Arial、無襯線字體；
        }
        .toggle-container {
            顯示：柔性；
            對齊項目：居中；
            邊距：20px 0；
        }
        .切換標籤{
            左邊距：10px；
            字體大小：1.2rem；
            背景顏色: rgb(64, 109, 94);
            內邊距：5px；

        }
        。轉變 {
            位置：相對；
            顯示：內聯塊；
            寬度：50px；
            高度：25 像素；
        }
        .切換輸入{
            不透明度：0；
            寬度：0；
            高度：0；
        }
        。滑桿 {
            位置：絕對；
            遊標：指針；
            頂部：0；
            左：0；
            右：0；
            底部：0；
            背景顏色：#555；
            邊框半徑：25px；
            過渡：0.4s；
        }
        .slider:之前{
            位置：絕對；
            內容： ””;
            高度：20px；
            寬度：20px；
            左：3px；
            底部：2.5px；
            背景顏色：白色；
            邊界半徑：50%；
            過渡：0.4s；
        }
        輸入：選取.slider {
            背景顏色：#4caf50；
        }
        輸入：檢查.slider：之前{
            變換：translateX(24px)；
        }
        。盒子{
            高度：250 像素；
            寬度：300px；
            背景顏色: rgb(8, 72, 51);
            邊框半徑：10px；
            內邊距：5px；
        }
    風格>
頭>

    <div>




          </div>

            
        

以上是使用 html css 和 javascript 切換樂趣的詳細內容。更多資訊請關注PHP中文網其他相關文章！