! Сегодня

Главная » Web и Технологии » Украшение для сайта на Хеллоуин Таинственный домик

Украшение для сайта на Хеллоуин Таинственный домик

Можно закрыть глаза на то, что видишь. Но нельзя закрыть сердце на то, что ты чувствуешь.

28-октября-2023, 21:47   1   0

Украшение для сайта на Хеллоуин Таинственный домик

Интересное тематическое украшение для сайта к празднику Хеллоуина в виде таинственного домика где обитает всякая нечисть. Скорее всего этот заброшенный ;жуткий замок принадлежит злой ведьме где идёт вечеринка. При наведении курсора на различные элементы и животных будет анимироваться тот или иной участок . Анимация выполнена при помощи CSS. Короче классная штука для оформления сайта к Хеллуину.

HTML

<div class="sky">
    <div class="moon"></div>
</div>

<div class="content">

    <div class="level-0">
        <div class="door">
            <div class="nosferatu"></div>
            <div class="logs">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="level-1">
        <div class="window">
            <div class="frankenstein"></div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="level-2">
        <div class="window">
            <div class="witch"></div>
        </div>
        <div class="shining"></div>
    </div>


    <div class="balcony"></div>
    <div class="bat-cat">
        <div class="body"></div>
        <div class="leg"></div>
        <div class="leg"></div>
        <div class="head"></div>
        <div class="ears"></div>
        <div class="tail"></div>
        <div class="wings">
            <div class="wing">
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
            </div>
            <div class="wing">
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="finger"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
                <div class="membrane"></div>
            </div>
        </div>
    </div>







    <div class="roof-0">
        <div class="window">
            <div class="phantom"></div>
            <div class="phantom"></div>
        </div>
        <div class="shining"></div>
    </div>
    <div class="roof-1"></div>
    <div class="roof-2">
        <div class="chimney"></div>
    </div>

    <div class="flying-bat"></div>

    <div class="fence">
        <span></span><span></span>
        <div class="bat">
            <div class="head">
                <div class="eyes"></div>
                <div class="mouth"></div>
            </div>
            <div class="wings"></div>
            <div class="legs">
                <div class="leg"></div>
                <div class="leg"></div>
            </div>
        </div>
        <div class="chimney"></div>
    </div>
    <div class="fence">
        <span></span><span></span>
        <div class="tomb">RIP</div>
        <div class="zombie-hand"></div>
        <div class="stones"></div>
    </div>



</div>


CSS

/*** IN PROGRESS ***/
/* adding more and more... */

:root {
    --gray: #1a191a;
    --black: #080708;
    --dark: #443847;
    --window: #ffc800cf;
    --house: #000;
    --bat: #0c0c0c;
    --bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: 
    linear-gradient(180deg, #000, #fff0, #fff0),
    radial-gradient(circle at 50% 100%, #005eff, #6d006d, #38005e );
}

body:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10vmin;
    z-index: -1;
    background: 
    radial-gradient(circle at calc(50% - 33vmin) calc(100% + 31vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), radial-gradient(circle at calc(50% + 33vmin) calc(100% + 30vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), radial-gradient(circle at 50% calc(100% + 43vmin), var(--house) 50vmin, #fff0 calc(50vmin + 1px) );
    background-repeat: no-repeat;
}

.content {
    width: 90vmin;
    height: 90vmin;
    /*background: url(./haunted.png) no-repeat center;*/
    background-size: cover;
    position: relative;
    perspective: 100vmin;
    perspective-origin: top;
    bottom: 5vmin;
}
    
.content * {
    position: absolute;
    transform-style: preserve-3d;
}

.level-0 {
    width: 30vmin;
    height: 25vmin;
    background: var(--house);
    bottom: 0;
    left: 22vmin;
    transform: rotateX(82deg) skewX(5deg);
    z-index: 1;
}

.level-1 {
    width: 16vmin;
    height: 34vmin;
    background: var(--house);
    bottom: 3.75vmin;
    left: 53vmin;
    transform: perspective(100vmin) rotateX(82deg) skewX(-10deg);
}

.level-2 {
    width: 19vmin;
    height: 35vmin;
    background: var(--house);
    bottom: 31.5vmin;
    left: 29vmin;
    transform: perspective(150vmin) rotateX(45deg) skewX(2deg) rotate(2deg);
    clip-path: polygon(0% 85%, 0% 0%, 100% 0%, 100% 94%, 48% 57%);
    z-index: 1;
    box-shadow: 0.25vmin -0.5vmin 0.5vmin 0 #fff4 inset, 0.5vmin -0.5vmin 1.5vmin 0 #fff2 inset;
}


.roof-0 {
    width: 37vmin;
    height: 23vmin;
    bottom: 23.25vmin;
    left: 18.75vmin;
    border: 19vmin solid #0000;
    box-sizing: border-box;
    border-bottom: 22vmin solid var(--house);
    transform: skew(-8deg, -1deg) rotate(1.25deg);
    border-radius: 0.5vmin;
}

.roof-1, .chimney:before {
    background: radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, #fff3 calc(18vmin + 1px) 18vmin, #fff0 19vmin 100%), radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, var(--house) calc(18vmin + 1px) ), radial-gradient(circle at 24.5vmin -5vmin, #fff0 25vmin, var(--house) calc(25vmin + 1px) ), #0000;
    width: 21vmin;
    height: 17vmin;
    bottom: 31.75vmin;
    left: 52vmin;
    transform: skew(-8deg, -1deg) rotate(2deg);
    border-radius: 0.5vmin;
    background-size: calc(50% - 1vmin) 100%, calc(50% - 1vmin) 100%, calc(50% + 1vmin) 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 99% 0;
}

/*
.roof-0 .chimney {
    left: -11vmin;
    top: 4vmin;
    transform: rotateY(180deg) rotateZ(29deg);
    transform-origin: -20% 120%;
}


.roof-0 .chimney:after {
    border-radius: 5vmin 0vmin 8vmin;
}
*/

.roof-2 {
    background: radial-gradient(circle at 34vmin -9vmin, #fff0 35vmin, var(--house) calc(35vmin + 1px) ), radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, #fff6 calc(28vmin + 1px), #fff0 28.75vmin ), radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, var(--house) calc(28vmin + 1px) ), #0f00;
    width: 34vmin;
    height: 25vmin;
    bottom: 63.9vmin;
    left: 26vmin;
    transform: skew(-8deg, -1deg) rotate(1deg);
    border-radius: 0.5vmin;
    background-size: calc(50% + 6.5vmin) 100%, calc(50% + 7vmin) 100%, calc(50% - 6.5vmin) 100%, calc(50% - 7vmin) 100%;
    background-repeat: no-repeat;
    background-position: 99% 0, 0 0, 0 0;
}

.door {
    background: 
    linear-gradient(183deg, #fff0 7.5vmin, #000 calc(7.5vmin + 1px) 8vmin, #fff0 calc(8vmin + 1px) 0), 
    linear-gradient(94deg, #000 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
    linear-gradient(-94deg, #000 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
    linear-gradient(-5deg, #000 0.5vmin, #fff0 calc(0.5vmin + 1px)), 
    linear-gradient(86deg, #fff0 3.5vmin, #000 calc(3.5vmin + 1px) 4vmin, #fff0 calc(4vmin + 1px)), 
    linear-gradient(95deg, #fff0 7vmin, #000 calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)), 
    linear-gradient(92deg, #fff0 10vmin, #000 calc(10vmin + 1px) 10.5vmin, #fff0 calc(10.5vmin + 1px)), 
    radial-gradient(circle at 50% 87%, #fff0 5.65vmin, #000 calc(5.65vmin + 1px)), 
    radial-gradient(circle at 46% 87%, #fff0 5.65vmin, #000 calc(5.65vmin + 1px)), 
    linear-gradient(38deg, #fff0 4.25vmin, #000 calc(4.25vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), 
    linear-gradient(87deg, #fff0 1vmin, #000 calc(1vmin + 1px)), 
    linear-gradient(123deg, #fff0 5vmin, #000 calc(5vmin + 1px) 5.5vmin, #fff0 calc(5.5vmin + 1px)), 
    linear-gradient(150deg, #fff0 7vmin, #000 calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)),
    linear-gradient(180deg, var(--window), var(--window)), #fff;
    width: 13vmin;
    height: 20vmin;
    bottom: 1.5vmin;
    left: 8vmin;
    transform: skew(2deg, -2deg);
    border-radius: 100% 100% 0.5vmin 0.5vmin;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 65%, 100% 64%, 100% 63%, 105% 38%, 105% 38%, 60% 39%, 11% 39%, 58% 39%, 56% 39%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 50% 0, 100% 0, 100% 0;
    /*overflow: hidden;*/
    perspective: 1000vmin;
    perspective-origin: top;
}



.window {
    width: 9vmin;
    height: 18vmin;
    width: 8vmin;
    height: 17vmin;
    background: 
    linear-gradient(178deg, #fff0 0 12vmin, #000 calc(12vmin + 1px) 12.6vmin, #fff0 calc(12.6vmin + 1px)), linear-gradient(183deg, #fff0 0 7vmin, #000 calc(7vmin + 1px) 7.65vmin, #fff0 calc(7.65vmin + 1px)), linear-gradient(91deg, #fff0 0 3.65vmin, #000 calc(3.65vmin + 1px) 4.1vmin, #fff0 calc(4.1vmin + 1px)), linear-gradient(180deg, var(--window), var(--window)), #fff;
    background: linear-gradient(178deg, #fff0 0 12vmin, #000 calc(12vmin + 1px) 12.4vmin, #fff0 calc(12.4vmin + 1px)), linear-gradient(183deg, #fff0 0 7vmin, #000 calc(7vmin + 1px) 7.45vmin, #fff0 calc(7.45vmin + 1px)), linear-gradient(91deg, #fff0 0 3.65vmin, #000 calc(3.65vmin + 1px) 4.1vmin, #fff0 calc(4.1vmin + 1px)), linear-gradient(180deg, var(--window), var(--window)), #fff;
    left: 3.5vmin;
    top: 8vmin;
    border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
    transform: rotateX(-0deg);
    overflow: hidden;
}

.level-1 .window {
    --window: #ff9900cf;
}

.level-1 .window:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -1vmin;
    max-height: 0;
    background: repeating-linear-gradient(180deg, var(--house) 0 0.5vmin, #fff0 0 0.85vmin );
    transition: max-height 2s var(--bounce) 0s;
    border-bottom: 0.75vmin solid var(--house);
}

.level-1 .window:hover:before {
    max-height: 100%;
    top: -0.75vmin;
    transition: max-height 2s var(--bounce) 0s;
}




.level-2 .window {
    --window: #ff8100cf;
}
.level-2 .window {
    transform: scale(0.75) rotateY(180deg) skewY(-2deg);
    top: 1vmin;
    left: 4.5vmin;
    border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
    overflow: hidden;
    border-top: 1px solid var(--house);
}





.roof-0 .window {
    --window: #e8ff00cf;
    --window: #084461e0;
    --light: #111;
    border-radius: 100%;
    height: 7vmin;
    width: 7vmin;
    background: linear-gradient(183deg, #fff0 0 3.25vmin, #000 calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(91deg, #fff0 0 3.25vmin, #000 calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(180deg, var(--light), var(--window));
    left: -3vmin;
}

@keyframes light-on {
    0%, 20%, 35% { --window: #084461e0; --light: #111; }
    10%, 30%, 40%, 100% { --window: #ffd5a0; --light: #fff5ce; }
}


.chimney {
    left: 21vmin;
    top: 8vmin;
    width: 7vmin;
    height: 12vmin;
}

.chimney:before {
    content: "";
    position: absolute;
    transform: scale(0.25) rotate(2deg);
    left: -7vmin;
    top: -6vmin;
}

.chimney:after {
    content: "";
    position: absolute;
    border: 1.5vmin solid #fff0;
    border-right: 2vmin solid var(--house);
    border-bottom: 3vmin solid var(--house);
    border-top: 0;
    width: 6vmin;
    height: 6vmin;
    left: -4.75vmin;
    bottom: -1.85vmin;
    border-radius: 5vmin 0vmin 6vmin;
}




.fence {
    background: radial-gradient(circle at 55% 32vmin, var(--house) 16vmin, #fff0 calc(16vmin + 1px));
    width: 22vmin;
    height: 22vmin;
    bottom: 0;
}

.fence:before {
    content: "";
    position: absolute;
    width: 2vmin;
    height: 18vmin;
    background: var(--house);
    left: 5vmin;
    top: 5vmin;
    transform: skewY(30deg) rotate(-1deg);
    box-shadow: 8vmin -5vmin 0 -0.25vmin var(--house);
    /*filter: drop-shadow(-2px -2px 0px #fff);*/
}

.fence:after {
    content: "";
    position: absolute;
    width: 1.75vmin;
    height: 16vmin;
    background: var(--house);
    left: 10vmin;
    top: 4vmin;
    transform: skewY(-20deg) rotate(1deg);
    box-shadow: 5vmin 3vmin 0 0.1vmin var(--house);
    /*filter: drop-shadow(-2px -2px 0px #fff);*/
}


.fence + .fence {
    right: 0;
}


.fence + .fence:before {
    left: 4vmin;
    top: 6vmin;
    height: 12vmin;
    transform: skewY(30deg) rotate(-7deg);
    box-shadow: 5vmin -2vmin 0 -0.25vmin var(--house);
}

.fence + .fence:after {
    left: 6.5vmin;
    top: 7vmin;
    height: 10vmin;
    transform: skewY(-23deg) rotate(-1deg);
    width: 1.5vmin;
    box-shadow: 5vmin 2vmin 0 -0.25vmin var(--house), 4.75vmin 3vmin 0 -0.25vmin var(--house);
}


.fence span {
    background: var(--house);
    width: 15vmin;
    height: 1.85vmin;
    top: 7vmin;
    left: 3vmin;
    transform: skewX(15deg) rotate(-10deg);
    /*filter: drop-shadow(-2px 2px 0px #fff);*/
}

.fence span + span {
    width: 15vmin;
    top: 12.25vmin;
    left: 2.5vmin;
    transform: rotate(-8deg) skewX(-18deg);
}



.fence + .fence span {
    width: 11vmin;
    top: 8vmin;
    transform: rotate(3deg) skewX(-4deg);
    height: 2vmin;
    left: 2.5vmin;
}

.fence + .fence span + span {
    top: 12vmin;
    transform: rotate(-4deg) skewX(17deg);
    left: 3.2vmin;
    width: 10.2vmin;
}





.balcony {
    width: 12vmin;
    height: 9vmin;
    background: 
    linear-gradient(-101deg, #fff0 0 1.5vmin, #000 calc(1.5vmin + 1px) 2.25vmin, #fff0 calc(2.25vmin + 1px)),linear-gradient(-98deg, #fff0 0 5.5vmin, #000 calc(5.5vmin + 1px) 6.25vmin, #fff0 calc(6.25vmin + 1px)), linear-gradient(88deg, #fff0 0 4vmin, #000 calc(4vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), linear-gradient(85deg, #fff0 0 9vmin, #000 calc(9vmin + 1px) 9.75vmin, #fff0 calc(9.75vmin + 1px)), linear-gradient(177deg, #fff0 1vmin, #000 calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px)), linear-gradient(183deg, #fff0 1vmin, #000 calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px));
    z-index: 3;
    left: 43vmin;
    top: 34vmin;
    border-bottom: 2vmin solid var(--house);
    border-right: 0.75vmin solid var(--house);
    border-radius: 0.25vmin;
    transform: skewX(-18deg) rotate(5deg);
    transition: transform 1s var(--bounce) 0s;
    transform-origin: 0 100%;
}

.balcony:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    /*background: #00f4;*/
    top: -78%;
}


.balcony:hover {
    transform: skewX(-18deg) rotate(25deg);
    transition-duration: 0.5s;
}



















/*aqui*/


.sky {
    background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
    height: 100vh;
    z-index: -1;
    position: absolute;
    left: 0;
}

.sky:after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0vh;
    background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
        radial-gradient(2px 2px at 43px 75px, #735454, transparent),
        radial-gradient(2px 1px at 54px 184px, #828282, transparent),
        radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
        radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
        radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
        radial-gradient(1px 2px at 210px 154px, #805241, transparent),
        radial-gradient(2px 2px at 243px 102px, #866356, transparent),
        radial-gradient(2px 1px at 264px 184px, #794937, transparent),
        radial-gradient(2px 2px at 293px 44px, #735454, transparent),
        radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
        radial-gradient(2px 2px at 249px 162px, #884228, transparent),
        radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
        radial-gradient(1px 1px at 163px 42px, #403433, transparent),
        linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
    background-repeat: no-repeat, repeat;
    background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
        333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
        333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
    opacity: 0.5;
    mix-blend-mode: color-burn;
}

.moon {
    position: absolute;
    z-index: 2;
    width: 20vmin;
    height: 20vmin;
    left: 20vmin;
    top: 15vmin;
    opacity: 1;
    border-radius: 100%;
    animation: start-moon 3s ease 0s 1;
    background: radial-gradient(circle at 50% 50%,#fdfdfd 0% 7vmin,#ffffff00 7.25vmin 100%),#fff;
    box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,0 0 20px 5px #fdfdfd;
}

.moon:before {
    content: "";
    background: radial-gradient(
        circle at 100% 60%,
        #ffffff00 0% 60%,
        #dddddd 75% 100%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 100%;
}

.moon:after {
    content: "";
    background: radial-gradient(
        circle at 0% 40%,
        #efefef 0% 60%,
        #ededed 75% 100%
    );
    width: 4.5vmin;
    height: 4.5vmin;
    position: absolute;
    top: 20%;
    left: 20%;
    border-radius: 100%;
    filter: blur(2px);
}




































/*TRICKS*/
.level-2 .window:before {
    content: "";
    position: absolute;
    width: 1.5vmin;
    height: 20vmin;
    background: hsla(0, 100%, 50%, 0.75);
    border-radius: 0 0 1vmin 1vmin;
    top: -22vmin;
    left: 50%;
    z-index: 1;
    transition: all 4s ease-out 0s;
    box-shadow: 
        -1.5vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        -2.875vmin -2vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
        -3.875vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
        -4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
        1.35vmin -1.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        2.5vmin -2.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
        3.35vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}

.level-2 .window:hover:before {
    top: 0vmin;
    box-shadow: 
        -1.5vmin -1vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        -2.875vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
        -3.875vmin -2.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
        -4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
        1.35vmin -2.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
        2.5vmin -1.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
        3.35vmin -3.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}












/*** BAT ***/

@keyframes bat-fly {
    25% { transform: translateX(-1.5vmin) translateY(-5vmin) scale(0.6); }
    33% { margin-bottom: 5vmin; }
    50% { margin-bottom: 5vmin; transform: translateX(0.5vmin) scale(0.7);}
    66% { margin-bottom: 5vmin; }
    75% { transform: translateX(1vmin) scale(0.6); }
}

.bat {
    width: 15vmin;
    height: 12vmin;
    bottom: 30vmin;
    margin-bottom: 0;
    left: 13.25vmin;
    /*transition: animation 1s ease 1s;*/
}

.bat:hover  {
    transition: all 1s linear 0s;
    /*animation: bat-fly 4s linear 0s 2; */
}

.bat .head {
    background: radial-gradient(circle at 50% 100%, #fff0 calc(2vmin - 1px), #5558 calc(2vmin + 0px), var(--bat) calc(2vmin + 2px));
    width: 6vmin;
    height: 9.5vmin;
    left: 4vmin;
    top: 0.75vmin;
    border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
    transform: rotate(-173deg);
}

.bat .head:before, 
.bat .head:after {
    background: var(--bat);
    content: "";
    position: absolute;
    width: 0.5vmin;
    height: 2.65vmin;
    bottom: 5vmin;
    left: 5.65vmin;
    border-radius: 100% 100% 100% 0%;
    transform: rotate(-5deg);
}

.bat .head:after {
    left: -0.15vmin;
    border-radius: 100% 100% 0% 100%;
    transform: rotate(1deg);
}

.bat .eyes {
    width: 100%;
    height: 2.5vmin;
    bottom: 2.75vmin;
    transform: rotate(-5deg);
}

.bat .eyes:before, 
.bat .eyes:after {
    content: "";
    position: absolute;
    width: 1.35vmin;
    height: 1.75vmin;
    background: radial-gradient(ellipse at 38% 48%, #fff0 0.3vmin, var(--window) calc(0.3vmin + 1px)), radial-gradient(circle at 43% 60%, #fff 10%, #fff0 calc(10% + 1px) 100%);
    border-radius: 100%;
    left: 3.25vmin;
    top: 0.1vmin;
}

.bat .eyes:after {
    width: 1.65vmin;
    height: 2.25vmin;
    left: 1.25vmin;
    transform: rotateY(180deg);
}


.bat .mouth {
    background: 
        radial-gradient(ellipse at 42% 26%,pink 0.25vmin, #fff0 calc(0.25vmin + 1px)), 
        radial-gradient(ellipse at 36% 4%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(ellipse at 41% 0%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(ellipse at 75% 16%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
        radial-gradient(circle at 50% 6.5vmin, #fff0 4vmin, #400000 calc(4vmin + 1px));
    width: 4.5vmin;
    height: 3vmin;
    left: 0.65vmin;
    top: 0.75vmin;
    border-radius: 10vmin 10vmin 0 0;
}

.bat .mouth:before, 
.bat .mouth:after {
    content: "";
    position: absolute;
    width: 1vmin;
    height: 2.4vmin;
    background: conic-gradient(from 160deg, #fff0, #fff 5deg 35deg, #fff0 40deg 100%);
    top: 0.1vmin;
    left: 0.75vmin;
    transform: rotate(-10deg);
}

.bat .mouth:after {
    top: 0.2vmin;
    left: 3.1vmin;
    transform: rotate(13deg);
}


.bat .legs {
    width: 7vmin;
    height: 3vmin;
    bottom: 0.1vmin;
    left: 2.65vmin;
}

.bat .leg {
    background: var(--bat);
    width: 0.65vmin;
    height: 2.25vmin;
    transform: rotate(50deg);
    left: 0.75vmin;
    top: -0.25vmin;
    border-radius: 0 0 2vmin 2vmin;
    box-shadow: 0.15vmin -0.5vmin 0 0 var(--bat), -0.15vmin -0.5vmin 0 0 var(--bat);
}

.bat .leg:before, 
.bat .leg:after {
    content: "";
    position: absolute;
    background: var(--bat);
    width: 0.5vmin;
    height: 1.25vmin;
    transform: rotate(-55deg);
    left: 0.45vmin;
    top: 0.65vmin;
    border-radius: 0 0 2vmin 2vmin;
}

.bat .leg:after {
    transform: rotate(55deg);
    left: -0.35vmin;
    top: 0.5vmin;
}

.bat .leg + .leg {
    left: 5.5vmin;
    top: 0.75vmin;
    transform: rotate(-25deg);
}




.bat .wings {
    width: 100%;
    height: 65%;
    z-index: -1;
}

.bat .wings:before, 
.bat .wings:after {
    content: "";
    position: absolute;
    width: 30%;
    height: 70%;
    background: radial-gradient(circle at -2.2vmin 2.2vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px)),radial-gradient(circle at -1.25vmin 2.35vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px));
    bottom: 2.5vmin;
    left: 1vmin;
    transform-origin: 100% 100%;
    transform: rotate(-150deg);/*-15*/
    border-radius: 0 3.55vmin 0 0;
    background-repeat: no-repeat;
    background-size: 100% 3.2vmin, 100% 2.5vmin;
    background-position: 0 0, 0 3vmin;
    /*animation: bat-fly-r 0.15s ease 0s infinite;*/
}

@keyframes bat-fly-r {
    0%, 100% { transform: rotate(-15deg); }    
    50% { transform: rotate(-50deg); }    
}
@keyframes bat-fly-l {
    0%, 100% { transform: rotate(33deg) rotateY(180deg); }    
    50% { transform: rotate(63deg) rotateY(180deg); }    
}

.bat .wings:after {
    bottom: 2.65vmin;
    left: 3.75vmin;
    top: 0.25vmin;
    transform-origin: 100% 100%;
    transform: rotate(170deg) rotateY(180deg);/*33*/
    /*animation-name: bat-fly-l;*/
    animation-delay: -0.05s;
}

.flying-bat:hover + .fence .bat .wings:before {
    animation: bat-fly-r 0.125s ease 0s infinite;
}


.flying-bat:hover + .fence .bat .wings:after {
    animation: bat-fly-l 0.125s ease 0s infinite;
}













.tomb {
    background: var(--house);
    width: 5vmin;
    height: 6vmin;
    border-radius: 5vmin 5vmin 0 0;
    bottom: 3vmin;
    right: -7vmin;
    right: 0;
    transform: rotateX(12deg) skew(-11deg, 20deg);
    text-align: center;
    color: #3a1752;
    color: #490101;
    padding-top: 2vmin;
    font-family: serif;
    font-weight: bold;
    transition: all 2s ease 0s;
    z-index: 1;
    cursor: default;
    font-size: 1.75vmin;
}

.tomb:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 5vmin;
    border-right: 1vmin solid var(--house);
    border-top: 0.05vmin solid #fff0;
    border-radius: 0 3vmin 0 0;
    right: -1.2vmin;
    bottom: 0.1vmin;
}









@keyframes move-witch {
    0% { left: 1.5vmin; }
    25% { bottom: -4vmin}
    50% { left: -5vmin; }
    75% { bottom: 2vmin; }
    100% { left: 1.5vmin; }
}


.witch {
    width: 15vmin;
    height: 18vmin;
    left: -9.5vmin;
    bottom: -0.15vmin;
    opacity: 0.5;
    background: var(--house);
    animation: move-witch 4s ease 0s infinite alternate;
    box-sizing: border-box;
    clip-path: polygon(3% 55%, 5% 55%, 11% 55%, 22% 56%, 24% 57%, 24% 55%, 28% 56%, 34% 53%, 36% 51%, 38% 48%, 41% 42%, 42% 41%, 42% 38%, 43% 36%, 42% 36%, 40% 38%, 40% 38%, 40% 36%, 39% 33%, 38% 33%, 36% 33%, 35% 34%, 35% 33%, 35% 32%, 36% 30%, 37% 29%, 38% 27%, 38% 26%, 34% 23%, 32% 21%, 28% 17%, 27% 14%, 27% 12%, 40% 20%, 45% 17%, 50% 14%, 56% 10%, 59% 8%, 62% 8%, 66% 8%, 64% 9%, 62% 10%, 60% 13%, 58% 15%, 54% 18%, 53% 18%, 52% 24%, 56% 25%, 60% 27%, 64% 27%, 62% 28%, 58% 29%, 56% 30%, 59% 32%, 57% 31%, 56% 33%, 56% 32%, 55% 33%, 57% 33%, 56% 33%, 60% 36%, 56% 36%, 62% 37%, 56% 38%, 56% 40%, 58% 42%, 61% 45%, 64% 48%, 67% 52%, 69% 54%, 70% 56%, 69% 58%, 68% 59%, 70% 60%, 75% 60%, 76% 57%, 77% 56%, 78% 55%, 80% 56%, 80% 56%, 82% 57%, 83% 56%, 87% 56%, 90% 56%, 93% 56%, 96% 55%, 95% 56%, 97% 57%, 98% 60%, 97% 64%, 97% 67%, 96% 70%, 93% 69%, 88% 68%, 85% 67%, 82% 66%, 81% 66%, 80% 67%, 78% 66%, 77% 66%, 76% 66%, 75% 65%, 75% 63%, 74% 62%, 71% 61%, 67% 60%, 66% 61%, 64% 61%, 63% 62%, 64% 65%, 66% 67%, 68% 70%, 70% 72%, 73% 73%, 75% 75%, 78% 77%, 81% 78%, 78% 79%, 76% 80%, 75% 82%, 72% 81%, 71% 82%, 70% 82%, 70% 82%, 69% 81%, 67% 81%, 66% 79%, 65% 79%, 64% 78%, 62% 78%, 58% 78%, 54% 78%, 52% 77%, 51% 77%, 51% 77%, 51% 78%, 51% 79%, 54% 82%, 55% 84%, 56% 86%, 55% 86%, 53% 87%, 52% 89%, 50% 90%, 47% 92%, 47% 92%, 46% 91%, 47% 91%, 48% 90%, 50% 89%, 51% 87%, 51% 84%, 52% 84%, 47% 78%, 44% 75%, 41% 73%, 40% 79%, 41% 83%, 42% 85%, 41% 85%, 40% 84%, 39% 85%, 38% 86%, 36% 88%, 33% 89%, 32% 89%, 34% 87%, 36% 86%, 36% 84%, 36% 83%, 37% 82%, 38% 80%, 38% 74%, 37% 70%, 37% 68%, 36% 67%, 34% 66%, 35% 64%, 36% 62%, 36% 59%, 32% 59%, 29% 58%, 26% 59%, 24% 58%, 22% 57%, 12% 56%, 5% 56%, 3% 55%);
}















/* nosferatu */
.nosferatu {
    width: 10vmin;
    height: 12.5vmin;
    left: -4vmin;
    bottom: -0.15vmin;
    opacity: 0.5;
    background: var(--house);
    box-sizing: border-box;
    clip-path: polygon(75% 100%, 69% 95%, 66% 90%, 62% 87%, 60% 82%, 58% 79%, 57% 75%, 57% 73%, 58% 68%, 59% 67%, 59% 65%, 59% 64%, 59% 62%, 60% 60%, 60% 59%, 61% 58%, 61% 58%, 61% 57%, 62% 55.75%, 67% 54.25%, 70% 53.5%, 73% 52%, 75% 50.75%, 77.5% 50%, 78% 50%, 79.5% 49%, 79.5% 48.75%, 82.5% 47.75%, 83% 47.9%, 84% 48%, 86.25% 49%, 88% 49.5%, 90% 51%, 89% 49%, 88% 48%, 86% 47%, 84% 46%, 83% 46%, 83.5% 45.5%, 85% 45.5%, 88% 46%, 89% 46.5%, 90% 47%, 91% 48%, 91% 49%, 91.5% 47%, 91.5% 47%, 91% 46%, 89% 44.75%, 86% 44%, 83.5% 43.75%, 83% 43.25%, 84.15% 42.75%, 86% 42.75%, 89% 43.65%, 90% 43.75%, 91% 43.75%, 92% 44.25%, 92.5% 45%, 92.5% 46.5%, 93.5% 44%, 92.75% 43%, 90% 41.75%, 88% 40.5%, 85% 39.5%, 84% 39.5%, 82% 39.75%, 81% 40%, 80% 40%, 79% 40.5%, 78% 41%, 77% 41.25%, 76% 41.35%, 74.5% 42.25%, 72% 43%, 69.5% 44%, 70% 43%, 70.5% 42%, 71% 41%, 71.75% 40%, 72% 39%, 71.75% 38%, 71.5% 37%, 72% 36%, 72.2% 35%, 72.5% 33%, 73.25% 32%, 74% 31%, 74% 31%, 75% 30%, 76.5% 28.5%, 78% 30%, 78.5% 30.5%, 79.2% 29%, 79.5% 28%, 79.6% 26%, 79.25% 25%, 79.1% 24%, 80% 23%, 80.2% 22%, 80% 21%, 81% 21%, 81.35% 20.35%, 80.95% 19.75%, 80.5% 19.25%, 80.4% 19%, 80.5% 18.7%, 80.65% 16%, 80.5% 15%, 79.75% 13%, 78.75% 11%, 78% 10%, 76.75% 9%, 74% 7%, 73% 6.25%, 71% 5.35%, 69% 5%, 68% 5%, 67% 5.5%, 66% 6%, 65% 7%, 64.75% 7.5%, 64.5% 7.75%, 64% 7.5%, 63.25% 7.2%, 62% 7%, 61.25% 7.5%, 60.5% 8%, 59.5% 9%, 58.5% 9.5%, 57.5% 9.2%, 56% 9.35%, 55% 9.5%, 52% 9%, 50% 8.9%, 47% 9%, 44% 9.2%, 42.5% 9.65%, 41% 9.25%, 40.5% 9.25%, 39.5% 9.25%, 38.5% 10%, 36.5% 12%, 35.25% 13%, 34% 15%, 33.75% 17%, 33.25% 18%, 32.5% 20%, 30.5% 22%, 29.5% 23%, 27.25% 25%, 27% 25.25%, 25.75% 26%, 24.7% 27%, 23.8% 28%, 23% 28.6%, 22.25% 29.2%, 20.7% 30.8%, 20.1% 31.5%, 20% 32%, 19% 33%, 18% 35%, 17.25% 36%, 17% 37%, 17% 41%, 18% 46%, 18% 49%, 18% 50%, 18% 51%, 19% 57%, 19% 53%, 19% 55%, 18.7% 57%, 18.6% 59%, 19% 61%, 19% 62%, 19.5% 65%, 19.7% 68%, 19.6% 70%, 19.5% 71%, 18% 73%, 17% 74%, 15% 75%, 14% 76%, 12% 77%, 11% 78%, 10% 79%, 9% 80%, 8% 81%, 7% 83%, 7% 84.5%, 8.3% 83%, 9.3% 82%, 10.75% 81%, 12.2% 80%, 14% 79%, 15% 78%, 17% 77.2%, 18% 77.25%, 17.5% 78%, 16.5% 79%, 15.25% 80%, 14.5% 81%, 13.5% 82%, 13% 83%, 12.25% 84%, 11.7% 85%, 11% 86%, 11% 86%, 9.27% 88%, 9% 89%, 9% 90%, 10% 89%, 11.55% 88%, 12.5% 87%, 13.5% 86%, 15.3% 84%, 16% 83%, 18% 81%, 20% 80%, 19.75% 81%, 19.5% 81.25%, 19% 82%, 18% 84%, 16.7% 86%, 15.7% 87%, 15% 88%, 15% 89%, 16% 88%, 18% 87%, 19% 86%, 20% 84%, 21% 83.25%, 22% 82%, 22% 82%, 23% 81%, 26% 76%, 29% 69%, 30% 61%, 29% 57%, 29% 56%, 29% 54%, 28.75% 51%, 29% 48%, 28.8% 46%, 29% 44%, 29.6% 43.5%, 30% 41.5%, 29% 43%, 31% 41%, 32% 40%, 32.8% 39.25%, 34.5% 38.75%, 33.25% 45%, 33% 49%, 32% 53%, 31.8% 55%, 30.2% 59%, 29% 68%, 27% 74%, 25% 80%, 22.65% 85%, 19.85% 91%, 19.5% 93%, 18.25% 96%, 16.75% 100%);    
    animation: move-nosferatu 10s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) 0s infinite;
}

/*
.door:hover .nosferatu {
    animation-duration: 4s;
}
*/

@keyframes move-nosferatu {
      0% { left: -4vmin; }
     45% { left: 1.75vmin; }
     50% { bottom: 0; }
    100% { left: -4vmin; }
}





.frankenstein {
    width: 20vmin;
    height: 20vmin;
    left: -6.5vmin;
    bottom: -6.25vmin;
    opacity: 0.5;
    background: var(--house);
    box-sizing: border-box;
    clip-path: polygon(29% 87%, 31% 82%, 32% 82%, 38% 85%, 39% 83%, 41% 81%, 42% 79%, 46% 76%, 49% 68%, 49% 64%, 50% 59%, 51% 57%, 52% 55%, 52% 52%, 50% 51%, 49% 51%, 51% 48%, 52% 45%, 53% 42%, 54% 39%, 54% 38%, 53% 37%, 52% 38%, 51% 40%, 50% 40%, 48% 39%, 46% 37%, 45% 38%, 44% 38%, 43% 38%, 41% 42%, 40% 42%, 40% 40%, 41% 38%, 40% 39%, 38% 40%, 37% 42%, 36% 41%, 36% 41%, 36% 41%, 36% 41%, 35% 40%, 34% 40%, 34% 40%, 35% 38%, 38% 36%, 40% 35%, 43% 34%, 43% 33%, 45% 33%, 47% 32%, 47% 31%, 46% 30%, 43% 30%, 39% 30%, 37% 30%, 37% 32%, 36% 30%, 36% 28%, 36% 28%, 34% 27%, 31% 27%, 30% 27%, 28% 28%, 25% 27%, 24% 27%, 24% 26%, 23% 25%, 22% 25%, 22% 24%, 23% 23%, 23% 23%, 22% 22%, 22% 22%, 24% 22%, 26% 23%, 28% 23%, 29% 23%, 30% 23%, 31% 23%, 33% 24%, 35% 24%, 36% 23%, 37% 23%, 40% 23%, 45% 23%, 50% 23%, 53% 23%, 54% 21%, 55% 21%, 56% 21%, 58% 21%, 60% 21%, 60% 19%, 62% 19%, 62% 17%, 60% 17%, 59% 17%, 58% 16%, 58% 15%, 59% 14%, 58% 13%, 59% 13%, 59% 12%, 59% 11%, 58% 11%, 57% 11%, 57% 10%, 58% 9%, 58% 9%, 59% 8%, 59% 7%, 58% 7%, 58% 6%, 59% 5%, 59% 1%, 60% 0%, 61% 0%, 63% 0%, 64% 1%, 65% 1%, 66% 1%, 67% 2%, 68% 1%, 69% 3%, 70% 2%, 70% 2%, 71% 3%, 72% 3%, 73% 4%, 72% 5%, 72% 8%, 72% 10%, 70% 12%, 71% 14%, 69% 14%, 69% 15%, 69% 15%, 69% 15%, 70% 15%, 70% 16%, 69% 16%, 69% 15%, 68% 16%, 68% 16%, 69% 17%, 69% 17%, 69% 18%, 70% 19%, 72% 20%, 73% 21%, 74% 23%, 74% 24%, 74% 27%, 74% 31%, 74% 34%, 73% 38%, 73% 42%, 73% 45%, 73% 47%, 73% 49%, 73% 50%, 73% 51%, 73% 53%, 73% 54%, 74% 56%, 74% 56%, 72% 57%, 71% 57%, 71% 58%, 70% 61%, 70% 63%, 70% 64%, 71% 66%, 71% 68%, 71% 70%, 70% 71%, 71% 74%, 72% 77%, 73% 81%, 75% 86%, 76% 88%, 76% 89%, 77% 90%, 77% 91%, 77% 93%, 76% 93%, 76% 97%, 72% 98%, 66% 99%, 60% 100%, 59% 98%, 59% 96%, 59% 95%, 59% 94%, 60% 94%, 62% 93%, 64% 93%, 65% 92%, 65% 92%, 64% 91%, 64% 90%, 64% 89%, 64% 87%, 64% 85%, 64% 84%, 63% 82%, 62% 80%, 62% 78%, 61% 76%, 60% 73%, 60% 71%, 58% 73%, 55% 78%, 54% 80%, 52% 84%, 52% 86%, 51% 88%, 49% 89%, 48% 90%, 48% 91%, 46% 94%, 44% 96%, 44% 96%, 43% 96%, 42% 96%, 37% 93%, 31% 90%, 29% 88%);
    animation: move-frankenstein 8s ease 0s infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes move-frankenstein {
    0% { left: -6.5vmin;  }
    20%, 60%, 80% { transform: rotate(5deg)}
    0%, 40%, 70% { transform: rotate(-5deg)}
    45% { left: -5.5vmin; }
    50% { bottom: -5vmin; }
    100% { left: -6.5vmin; }
}






.door:hover .logs {
    transform: rotateX(-50deg) rotateY(-1deg) scaleY(0.8);
}


.logs {
    width: 100%;
    height: 100%;
    bottom: 0;
    transform: rotateX(-40deg) rotateY(-136deg) scaleY(0.8);
    transform-origin: 0 100%;
    transition: transform 1s var(--bounce) 0s;
    filter: contrast(0.99);
    pointer-events: none;
    left: -0.5vmin;
}



.logs span {
    width: 2vmin;
    height: 70%;
    bottom: 0.5vmin;
    background: var(--house);
    left: 1vmin;
    transform: skewY(12deg);
    box-shadow: 8vmin -2.5vmin 0 0 var(--house);
}


.logs span + span {
    width: 1.6vmin;
    left: 3.1vmin;
    bottom: 0.75vmin;
    transform: skewY(-6deg);
    box-shadow: 4vmin 0.75vmin 0 0 var(--house);
}

.logs span + span + span {
    width: 1.75vmin;
    left: 5.1vmin;
    bottom: 1.25vmin;
    transform: skewY(20deg);
    box-shadow: 5.75vmin -1.5vmin 0 -0.25vmin var(--house), -5.75vmin 2.95vmin 0 -0.25vmin var(--house);
}



.logs:before, .logs:after {
    content: "";
    position: absolute;
    background: var(--house);
    width: 100%;
    height: 2vmin;
    bottom: 2vmin;
    transform: skew(-31deg, -3deg);
    left: -0.25vmin;
    box-shadow: -5vmin -8.5vmin 0 0 var(--house);
}

.logs:after {
    width: 12vmin;
    height: 2.5vmin;
    bottom: 6.25vmin;
    transform: skew(13deg, 13deg);
    left: 0.65vmin;
    box-shadow: none;
}










.bat + .chimney {
    left: 24.5vmin;
    top: -19.65vmin;
    transform: rotateY(180deg) rotateZ(29deg);
    transform-origin: -20% 120%;
    z-index: -1;
    width: 6vmin;
    transition: transform 0.25s var(--bounce) 0s;
}




.bat + .chimney:after {
    border-radius: 5vmin 0vmin 8vmin;
}







.flying-bat {
    position: absolute;
    width: 15vmin;
    height: 14vmin;
    bottom: 27vmin;
    left: 12vmin;
    z-index: 1;
}

.flying-bat:hover + .fence .bat {
    animation: bat-fly 4s linear 0s infinite; 
}

.flying-bat:hover + .fence .chimney {
    transform: rotateY(180deg) rotateZ(22deg); 
    transition: transform 1s var(--bounce) 0s;
}












.phantom {
    background: 
    radial-gradient(circle at 64% 23%, #0e1d24 0.25vmin, #fff0 calc(0.25vmin + 1px)),
    radial-gradient(circle at 35% 25%, #0e1d24  0.25vmin, #fff0 calc(0.25vmin + 1px)), #ffffff10;
    width: 3vmin;
    height: 5vmin;
    border-radius: 2vmin 2vmin 0 0;
    left: 1vmin;
    top: 1vmin;
    transform: skew(10deg, -10deg);
    clip-path: polygon(1% 99%, 0% 1%, 99% 0%, 100% 99%, 94% 99%, 90% 96%, 88% 92%, 85% 90%, 82% 88%, 81% 90%, 79% 93%, 78% 96%, 78% 100%, 72% 99%, 71% 95%, 71% 93%, 68% 90%, 64% 87%, 63% 86%, 61% 89%, 60% 91%, 59% 92%, 58% 93%, 57% 96%, 55% 97%, 53% 98%, 50% 95%, 49% 92%, 49% 91%, 48% 89%, 45% 86%, 43% 85%, 40% 89%, 40% 90%, 39% 92%, 38% 95%, 37% 96%, 34% 97%, 31% 98%, 30% 95%, 29% 93%, 29% 92%, 28% 90%, 25% 87%, 22% 87%, 20% 88%, 20% 90%, 19% 93%, 19% 95%, 18% 96%, 16% 98%, 14% 99%, 13% 97%, 11% 97%, 11% 95%, 10% 93%, 8% 93%, 5% 96%, 4% 97%, 4% 99%, 4% 99%, 0% 100%);
    animation: move-phantom 2s ease 0s infinite alternate;
}

@keyframes move-phantom {
    0% { left: 0.5vmin; transform: skew(10deg, -10deg) }
    20%, 60%, 80% { transform: rotate(8deg) skew(10deg, -10deg); }
    0%, 40%, 70% { transform: rotate(-7deg) skew(10deg, -10deg); }
    45% { left: 3.5vmin; }
    50% { bottom: -5vmin; }
    100% { left: 0.5vmin; transform: skew(10deg, -10deg) }
}



.phantom + .phantom {
    transform: skew(-7deg, 9deg) rotateY(180deg);
    animation-delay: -1s;
    animation-direction: reverse;
    animation-duration: 2.1;
    margin-top: -0.25vmin;
    width: 2.5vmin;
    height: 5.5vmin;
}


.roof-0 .window:hover {
    /*
    --window: #e8ff0099;
    --window: #ffd5a0;
    --light: #fff5ce;
    */
    animation: light-on 0.75s linear 0s 1;
    animation-fill-mode: forwards;
}

.roof-0 .window:hover .phantom {
    opacity: 0.05;

}




.tomb:hover {
    transform: rotateX(12deg) skew(-11deg, 20deg) rotateX(-13deg);
    transform: rotateX(12deg) skew(-19deg, 25deg) rotateX(-13deg);
    transform-origin: 50% 100%;
}




.zombie-hand {
    width: 5vmin;
    height: 8vmin;
    left: 12.75vmin;
    bottom: -2vmin;
    clip-path: polygon(24% 99%, 30% 77%, 32% 69%, 33% 66%, 34% 60%, 32% 56%, 27% 54%, 25% 52%, 22% 44%, 22% 39%, 21% 37%, 16% 36%, 15% 38%, 11% 38%, 6% 36%, 5% 34%, 7% 32%, 10% 32%, 12% 31%, 14% 31%, 16% 32%, 20% 32%, 25% 33%, 28% 33%, 29% 32%, 30% 30%, 28% 28%, 25% 27%, 23% 27%, 20% 27%, 17% 27%, 16% 26%, 17% 24%, 18% 22%, 19% 20%, 24% 20%, 28% 21%, 33% 22%, 35% 24%, 36% 27%, 38% 28%, 42% 26%, 42% 24%, 41% 21%, 38% 20%, 33% 17%, 31% 16%, 28% 16%, 26% 15%, 27% 12%, 29% 11%, 33% 12%, 36% 12%, 37% 13%, 39% 13%, 42% 15%, 45% 17%, 48% 19%, 49% 20%, 50% 23%, 53% 25%, 53% 23%, 53% 21%, 52% 18%, 52% 16%, 52% 14%, 48% 12%, 46% 9%, 44% 6%, 45% 5%, 48% 4%, 49% 4%, 52% 5%, 54% 7%, 58% 9%, 59% 10%, 60% 11%, 61% 13%, 63% 17%, 64% 18%, 66% 19%, 67% 21%, 67% 23%, 67% 25%, 66% 29%, 66% 32%, 68% 34%, 68% 35%, 70% 37%, 72% 37%, 74% 34%, 76% 33%, 77% 32%, 76% 31%, 76% 30%, 77% 27%, 81% 23%, 85% 21%, 88% 21%, 92% 21%, 93% 21%, 94% 21%, 94% 22%, 92% 24%, 92% 25%, 91% 27%, 90% 28%, 92% 29%, 92% 30%, 93% 31%, 94% 33%, 94% 34%, 91% 35%, 89% 36%, 88% 38%, 85% 39%, 84% 42%, 84% 43%, 83% 45%, 80% 47%, 75% 48%, 72% 50%, 68% 53%, 66% 56%, 64% 61%, 64% 65%, 63% 69%, 64% 73%, 64% 76%, 66% 99%);
    background: var(--house);
    transform-origin: 75% 100%;
    transform: rotate(10deg);
    transition: bottom 1s ease 0s;
}

.tomb:hover + .zombie-hand {
    animation: move-zombie 0.25s ease 0s infinite;
    animation-fill-mode: forwards;
    bottom: 5.25vmin;
    transition: bottom 3s ease 0.25s;
}

@keyframes move-zombie {
    0%, 50%, 100% { left: 12.75vmin;} 
    50% { margin-bottom: 0.15vmin;}  
    25%, 75% { left: 12.85vmin;}
}



.tomb:hover + .zombie-hand + .stones:before,
.tomb:hover + .zombie-hand + .stones:after {
    content: "";
    position: absolute;
    width: 0.5vmin;
    height: 0.75vmin;
    top: 0vmin;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: var(--house);
    animation: move-stone-1 2s ease-out 0s;
    animation-fill-mode: forwards;
}

.tomb:hover + .zombie-hand + .stones:after {
    animation: move-stone-2 2s ease-out 0.5s;
    animation-fill-mode: forwards;
    transform: rotateZ(180deg);
}



.tomb:hover + .zombie-hand + .stones {
    bottom: 3vmin;
}

.stones {
    right: 1.75vmin;
    bottom: -6vmin;
    width: 8vmin;
    height: 8vmin;
    /*background: #0f02;*/
    transform: rotate(45deg);
    transition: bottom 1.5s ease 0s;
    border-radius: 0 5vmin;
    z-index: -3;
    pointer-events: none;
}

@keyframes move-stone-1 {
    10% { top: 1vmin; left: 0.25vmin;}
    20% { top: 2vmin; left: 0.5vmin; }
    30% { top: 3vmin; left: 1vmin; }
    50% { top: 5vmin; left: 2.5vmin; transform: rotate(0deg); }
    60%, 100% { top: 6vmin; left: 2.5vmin; transform: rotate(30deg);}
}

@keyframes move-stone-2 {
    10% { left: 1vmin;}
    20% { left: 2vmin; }
    30% { left: 3vmin; top: 0.75vmin; }
    50% { left: 5vmin; top: 2.25vmin; transform: rotate(0deg); }
    60%, 100% { left: 5.25vmin; top: 4.5vmin; transform: rotate(30deg);}
}


























/**** BAT CAT *****/


.bat-cat {
    width: 80vmin;
    height: 40vmin;
    animation: fly-move 1s ease 0s 1;
    z-index: 2;
    transform: scale(0.2);
    left: 18vmin;
    top: 12vmin;
}

@keyframes fly {
    25% { transform: translateX(1vmin) scale(0.2); }
    33% { margin-top: -1vmin; }
    0%, 50%, 100% { transform: translateX(0vmin) scale(0.2); }
    66% { margin-top: 1vmin; }
    75% { transform: translateX(2vmin) scale(0.2); }
}

@keyframes fly-move {
    25% { transform: translateX(-0.5vmin) scale(0.2); }
    53% { margin-top: 0.5vmin; }
    86% { margin-top: -0.5vmin; }
    75% { transform: translateX(0.5vmin) scale(0.2); }
}

.bat-cat * {
    position: absolute;
    box-sizing: border-box;
}

.balcony:hover + .bat-cat {
    animation: fly 1.5s ease 0s infinite;
}


.bat-cat .body {
    width: 20vmin;
    height: 20vmin;
    background: var(--black);
    border-radius: 1vmin 100%;
    top: 15vmin;
    left: 30vmin;
    transform: rotate(45deg) skew(-5deg, -5deg);
    box-shadow: 1vmin -0.15vmin 0 0 var(--gray) inset;
    z-index: 2;
    transition: all 1s ease 0s;
    border-radius: 8vmin 100%;
    top: 16.5vmin;
}



.balcony:hover + .bat-cat .body {
    border-radius: 1vmin 100%;
    top: 15vmin;
}

.bat-cat .head {
    width: 14vmin;
    height: 13vmin;
    background: var(--black);
    border-radius: 90% 90% 100% 100%;
    top: 7.25vmin;
    left: 33vmin;
    box-shadow: 1.2vmin 0.5vmin 0 0 inset var(--gray);
    z-index: 3;
}

.bat-cat .head:before,
.bat-cat .head:after {
    content: "";
    position: absolute;
    width: 3.75vmin;
    height: 4.25vmin;
    background: radial-gradient(circle at 60% 50%, #000 1.15vmin, #fff0 calc(1.15vmin + 1px)), #fff;
    border-radius: 100%;
    top: 5vmin;
    left: 2.15vmin;
    transform: rotate(-10deg);
}

.bat-cat .head::after {
    transform: rotate(10deg) rotateY(180deg);
    left: 8vmin;
}

.ears {
    width: 18.25vmin;
    height: 15vmin;
    left: 31vmin;
    top: 2vmin;
}

.ears:before,
.ears:after {
    content: "";
    position: absolute;
    width: 13vmin;
    height: 13vmin;
    left: -2.1vmin;
    top: 1.5vmin;
    background: var(--black);
    border-radius: 0.5vmin 100%;
    transform: skew(-5deg, -5deg) rotate(19deg);
    box-shadow: 1.25vmin -0.2vmin 0 0 var(--gray) inset;
}

.ears:after {
    left: 7vmin;
    transform: rotate(69deg) skew(-5deg, -5deg);
    box-shadow: 0.125vmin -1.5vmin 0 0 var(--gray) inset;

}

.bat-cat .wings {
    width: 80vmin;
    height: 40vmin;
    z-index: -1;
}

.bat-cat .wing {
    background: #ffc10700;
    width: 40vmin;
    height: 23vmin;
    top: 8vmin;
    transform-origin: 90% 50%;
    /*animation: fly-right 1.5s ease 0s infinite;*/
    opacity: 1;
    
    animation: stop-fly-right 1s linear 0s 1;
    animation-fill-mode: forwards;

}

.bat-cat .wing + .wing {
    transform: rotateY(180deg);
    left: 7vmin;
    animation: stop-fly-left 1s linear 0s 1;
    /*animation-name: fly-left;*/
    animation-fill-mode: forwards;
}



.balcony:hover + .bat-cat .wing {
    /*animation: stop-fly 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1;*/
    /*animation-fill-mode: forwards;*/
    opacity: 1;
    transition: opacity 0.5s ease 0s;
    animation: fly-right 0.15s ease 0s infinite;
}

.balcony:hover + .bat-cat .wing + .wing {
    animation-name: fly-left;
}


@keyframes fly-right {
    49% { transform: rotate(-25deg); }    
}

@keyframes fly-left {
    51% { transform: rotateY(180deg) rotate(-25deg); }  
}








@keyframes stop-fly-right {
    90% { opacity: 1;}
   100% { transform: rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}

@keyframes stop-fly-left {
    90% { opacity: 1;}
   100% { transform: rotateY(180deg) rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}








.finger {
    border-radius: 3vmin 5vmin;
    width: 0vmin;
    height: 22vmin;
    background: #f002;
    transform: rotate(68deg);
    top: -6vmin;
    left: 11vmin;
    border: 0.85vmin solid var(--black);
    background: var(--black);
    z-index: 2;
}

.finger + .finger {
    transform: rotate(28deg);
    top: 0vmin;
    left: 16vmin;
    height: 19vmin;
}

.finger + .finger + .finger {
    transform: rotate(-9deg);
    top: 0vmin;
    left: 23vmin;
    height: 23vmin;
}

.finger + .finger + .finger + .finger {
    transform: rotate(-50deg);
    top: -3.75vmin;
    left: 29vmin;
    height: 23vmin;
}

.finger:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.85vmin solid var(--black);
    border-radius: 100%;
}







.membrane {
    background: radial-gradient(circle at 38% 126%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
    width: 13vmin;
    height: 20vmin;
    transform: rotate(29deg);
    left: 5vmin;
    top: -3vmin;
    clip-path: polygon(100% 0%, 0% 80%, 100% 93%);
}

.membrane + .membrane {
    left: 16vmin;
    transform: rotate(30deg) rotateY(180deg);
    top: 3.5vmin;
}

.membrane + .membrane + .membrane {
    left: 24.5vmin;
    transform: rotate(-8deg) rotateY(180deg);
    top: 2.5vmin;
    clip-path: polygon(97% 0%, -50% 100%, 100% 100%);
    background: radial-gradient(circle at 70% 141%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
}






.bat-cat .leg {
    height: 5vmin;
    background: var(--black);
    box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
    transition: all 0.4s ease 0.25s;
    width: 6vmin;
    border-radius: 1vmin 1vmin 2.5vmin 2.5vmin;
    left: 34vmin;
    top: 32.5vmin;
    z-index: 1;
    transform: rotate(5deg);
}

.bat-cat .leg + .leg {
    border-radius: 2vmin 1vmin;    
    left: 41vmin;
    transform: rotate(-5deg);
}


.balcony:hover + .bat-cat .leg {
    z-index: 1;
    width: 2vmin;
    height: 5vmin;
    background: var(--black);
    top: 35vmin;
    left: 37vmin;
    transform: rotate(15deg);
    border-radius: 1vmin 2vmin;
    box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
    transition: all 0.4s ease 0.25s;
}

.balcony:hover + .bat-cat .leg + .leg {    
    left: 41vmin;
    border-radius: 2vmin 1vmin;
    transform: rotate(-13deg);
}


.bat-cat .leg:before {
    content: "";
    width: 2vmin;
    height: 4vmin;
    background: var(--black);
    top: 3.25vmin;
    transform-origin: 50% 0;
    left: -0.35vmin;
    border-radius: 1vmin 3vmin 3vmin 1vmin;
    border-left: 1.1vmin solid var(--gray);
    transition: all 0.4s ease 0.25s;
    position: absolute;
    transform: rotate(-160deg); 
    opacity: 0;
}

.bat-cat .leg + .leg:before {
    top: 3.25vmin;
    left: 0.25vmin;
    transform: rotate(18deg);
    border-radius: 3vmin 1vmin 1vmin 3vmin;
    border-left: 0;
    background: var(--gray);
    border-right: 1.35vmin solid var(--black);
    border-top: 1px solid var(--black);
}

.balcony:hover + .bat-cat .leg:before {
    transform: rotate(-25deg);
    opacity: 1;
    width: 1vmin;
}

.balcony:hover + .bat-cat .leg + .leg:before {
    transform: rotate(18deg);
}



.tail {
    width: 10vmin;
    height: 11vmin;
    border-radius: 1vmin 9vmin;
    left: 30vmin;
    top: 24vmin;
    transform: rotate(23deg);
    transform-origin: 100% 100%;
    border: 1vmin solid #fff0;
    border-bottom: 1vmin solid var(--black);
    border-left: 1.55vmin solid var(--black);
    filter: drop-shadow(-0.25vmin 0vmin 0px var(--gray)) drop-shadow(-0.25vmin 0vmin 0px var(--gray));
    z-index: 1;
    left: 25vmin;
    animation: tail-move 3s ease 0s infinite alternate;
    transition: all 0.4s ease 0.5s;
}

.tail:before {
    content: "";
    width: 2vmin;
    height: 2vmin;
    background: var(--black);
    border-radius: 3vmin 1vmin;
    left: -1.75vmin;
    top: -1.125vmin;
    transform: rotate(-36deg);
}

.balcony:hover + .bat-cat .tail {
    left: 30vmin;
    animation: none;
    transition-delay: 0s;
}

@keyframes tail-move {
    20% { transform: rotate(21deg); }
    72% { transform: rotate(25deg); }
    
}

/******* BAT CAT ******/
















.shining {
    /* background: red; */
    width: 28.75vmin;
    height: 2vmin;
    left: -28.8vmin;
    top: 0.015vmin;
    transform: rotate(-49.3deg);
    transform-origin: 100% 0;
    border-radius: 0 0 2.5vmin 500%;
    box-shadow: 0.5vmin 0.5vmin 0.5vmin 0 #fff2 inset;
}


.door + .shining {
    transform: rotate(-90deg);
    filter: blur(2px);
    width: 21.5vmin;
    left: -21.5vmin;
}

.level-1 .shining {
    transform: rotate(-91deg);
    filter: blur(4px);
}

.level-2 .shining {
    transform: rotate(-91deg);
    filter: blur(5px);
}

Поделиться

Tags

Имя Гагарина ?