Ghost button Animation

HTML CSS JS | 2D code

← بازگشت به کدبانک
پیش‌نمایش زنده
</> کد HTML 
<!DOCTYPE html>
<"attr">class="tag">html "attr">lang="fa">
<"attr">class="tag">head>
    <"attr">class="tag">meta "attr">charset="UTF-8">
    <"attr">class="tag">meta "attr">name="viewport" "attr">content="width=device-width, "attr">initial-scale=1.0, "attr">maximum-scale=1.0, "attr">user-scalable=no">
    <"attr">class="tag">title>Ghost Toggle Ultra</"attr">class="tag">title>
    <"attr">class="tag">link "attr">rel="stylesheet" "attr">href="style.css">
</"attr">class="tag">head>
<"attr">class="tag">body>

    <"attr">class="tag">div "attr">class="switch-container">
        <"attr">class="tag">div "attr">id="boo">Boo! 👻</"attr">class="tag">div>
        <"attr">class="tag">label "attr">class="switch">
            <"attr">class="tag">input "attr">id="toggle" "attr">type="checkbox">
            <"attr">class="tag">div "attr">class="slider round">
                <"attr">class="tag">div>
                    <"attr">class="tag">div "attr">class="ghost"></"attr">class="tag">div>
                </"attr">class="tag">div>
            </"attr">class="tag">div>
        </"attr">class="tag">label>
    </"attr">class="tag">div>

    <"attr">class="tag">script>
        const toggle = document.getElementById("toggle");
        const boo = document.getElementById("boo");
        const body = document.body;

        toggle.addEventListener("change", function() {
            if(this.checked) {
                boo.classList.add("show");
                body.classList.add("active");
            } else {
                boo.classList.remove("show");
                body.classList.remove("active");
            }
        });
    </"attr">class="tag">script>
</"attr">class="tag">body>
</"attr">class="tag">html>
{ } کد CSS 
/* تنظیمات پایه و حذف کادر آبی */
* { -webkit-tap-highlight-color: transparent; outline: none; box-sizing: border-box;
}

body { width: 100%; height: 100vh; margin: 0; background: #000000; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: background 0.5s ease; user-select: none;
}

/* اتمسفر صفحه در حالت فعال */
body.active { background: #000000; 
}

.switch-container { display: flex; flex-direction: column; align-items: center; transform: scale(1.5); 
}

@media (min-width: 768px) {

    .switch-container { transform: scale(2);
    }
}

/* افکت متن */
#boo { color: white; font-family: ';Arial Black', sans-serif; font-size: 20px; margin-bottom: 25px; opacity: 0; transition: 0.3s; text-transform: uppercase;
}

#boo.show { opacity: 1; animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
}

@keyframes glitch {
    0% { transform: translate(0); text-shadow: 2px 2px #ff00c1, -2px -2px #00fff9; }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); text-shadow: -2px -2px #ff00c1, 2px 2px #00fff9; }
    75% { transform: translate(-2px, -2px); }
    100% { transform: translate(0); }
}

.switch { position: relative; display: inline-block; width: 100px; height: 25px;
}

.switch input { opacity: 0; width: 0; height: 0;
}

.slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #222; transition: 0.4s; border-radius: 34px; border: 1px solid #333;
}
 input:checked + .slider { background-color: #459def; box-shadow: 0 0 20px rgba(69, 157, 239, 0.4);
}

/* انیمیشن و حرکت روح */ input:checked + .slider >; div { transform: translateX(65px);
}

input + .slider > div { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ghost { position: absolute; left: 0; top: -10px; width: 40px; height: 40px; background-color: white; border-radius: 100px; animation: bobble 4.3s infinite; filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
}

@keyframes bobble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15%); }
}

@keyframes sway {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

@keyframes sway-more {
    0%, 100% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
}

@keyframes blink {
    0%, 39%, 51%, 100% { top: 16px; height: 8px; }
    40%, 50% { top: 20px; height: 2px; }
}

.ghost:after { content: ";"; position: absolute; left: calc(50% - 7px); top: 16px; width: 10px; height: 8px; border-right: 3px solid black; border-left: 3px solid black; animation: bobble 2s infinite, sway-more 2s infinite 1s, blink 4.25s infinite;
}

.ghost:before { content: ";"; position: absolute; top: calc(50% - 6px); left: -10%; width: 120%; height: 12px; border-radius: 100px; background-color: white; animation: sway 2s infinite;
}