Minecraft स्विच

1426 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

12 August 2024

सीएसएस स्प्राइट-एनीमेशन स्विचर

3 March 2025

पावर स्विच

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>

</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #212121;
  }
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 4em;
    height: 2em;
  }
  
  .switch input {
    opacity: 1;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
  }
  
  .off {
    position: absolute;
    content: "";
    height: 2em;
    width: 2em;
    background-color: white;
    transition: .4s;
    image-rendering: pixelated;
    opacity: 1;
  }
  
  .on {
    position: absolute;
    content: "";
    height: 2em;
    width: 2em;
    background-color: white;
    transition: .4s;
    image-rendering: pixelated;
    opacity: 0;
  }
  
  .switch input:checked + .slider {
    background-color: #ccc;
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 1px #ccc;
  }
  
  .switch input:checked ~ .off {
    transform: translateX(2em);
  }
  
  .switch input:checked ~ .on {
    transform: translateX(2em);
    opacity: 1;
  }

Minecraft स्विच

अनुशंसित

इलेक्ट्रॉनिक स्विच

सीएसएस स्प्राइट-एनीमेशन स्विचर

पावर स्विच

HTML

CSS

JS

अनुशंसित

इलेक्ट्रॉनिक स्विच

सीएसएस स्प्राइट-एनीमेशन स्विचर

पावर स्विच

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS