DDLC Sticker Hover Animation

Tags: kawaii, ddlc, doki doki literature club, hover

Description:

they love u

this is my first time making a layout, if you wanna know how I made the keyframe animations, I used https://webcode.tools/generators/css/keyframe-animation?utm_content=cmp-true.

the code is a lot, so if you're using my layout along with this one, Instead of pasting this into the about me section, I recommend it pasting to the who I'd like to meet section, or any other section to keep it organized i guess.

have fun using it!!!1!!1!! no credit needed

my DDLC Layout theme!!1! :D

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by maetan (https://layouts.spacehey.com/layout?id=34285) -->

<style>
    .monika {
        background: url(https://64.media.tumblr.com/90e7627200ed600e9f5dd1db8dab42c9/tumblr_p0chpy6NJE1whk690o1_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 20px;
        bottom: 10px;
        height: 119px;
        width: 84px;
    }

    .monika:hover {
        animation: monika 1600ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes monika {
        from {
            transform: rotate(0deg);
            content: url("https://64.media.tumblr.com/6803f0f8ca6ab7295316f93d9c2e7661/tumblr_p0chpy6NJE1whk690o2_250.png");
        }
        to {
            transform: rotate(360deg);
        }
    }

    .natsuki {
        background: url(https://64.media.tumblr.com/daecf9a6f4ef3f35b52bd810a3c48b85/tumblr_p0chpy6NJE1whk690o3_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 90px;
        bottom: 10px;
        height: 110px;
        width: 96px;
    }

    .natsuki:hover {
        background: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        animation: natsuki 0.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes natsuki {
        0% {
            transform: translate(0);
            content: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        }
        20% {
            transform: translate(-2px, 2px);
        }
        40% {
            transform: translate(-2px, -2px);
        }
        60% {
            transform: translate(2px, 2px);
        }
        80% {
            transform: translate(2px, -2px);
        }
        100% {
            transform: translate(0);
            content: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        }
    }

    .yuri {
        background: url(https://64.media.tumblr.com/8f61649f03a5582e59d1651641a321e0/tumblr_p0chpy6NJE1whk690o8_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 175px;
        bottom: 10px;
        height: 115px;
        width: 79px;
    }

    .yuri:hover {
        background: url("https://64.media.tumblr.com/128c37165a9b299b2a57bc1be1f810ad/tumblr_p0chpy6NJE1whk690o7_250.png");
        animation: yuri 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes yuri {
        0%,
        100% {
            transform: translateX(0);
            content: url("https://64.media.tumblr.com/128c37165a9b299b2a57bc1be1f810ad/tumblr_p0chpy6NJE1whk690o7_250.png");
        }
        10%,
        30%,
        50%,
        70% {
            transform: translateX(-5px);
        }
        20%,
        40%,
        60% {
            transform: translateX(5px);
        }
        80% {
            transform: translateX(8px);
        }
        90% {
            transform: translateX(-8px);
        }
    }

    .sayori {
        background: url(https://64.media.tumblr.com/935147ad782a2f20d9d3f9dc44750a36/tumblr_p0chpy6NJE1whk690o5_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 245px;
        bottom: 10px;
        height: 115px;
        width: 79px;
    }

    .sayori:hover {
        background: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png");
        animation: sayori 0.9s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier;
    }

    @keyframes sayori {
        0%,
        100% {
            transform: translateX(0%);
            transform-origin: 50% 50%;
            content: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png")
        }
        15% {
            transform: translateX(-2px) rotate(-2deg);
        }
        30% {
            transform: translateX(5px) rotate(8deg);
        }
        45% {
            transform: translateX(-6px) rotate(-3.6deg);
        }
        60% {
            transform: translateX(5px) rotate(2.4deg);
        }
        75% {
            transform: translateX(-6px) rotate(-1.2deg);
            content: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png")
        }
    }

    }
</style>

<div class="monika"></div>
<div class="natsuki"></div>
<div class="yuri"></div>
<div class="sayori"></div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 917 comments ( View all | Add Comment )

[ ♯ 𝔸𝕞𝕪 ʚɞ 🍮🎹⋆.˚]	1765128352 using!! Report Comment
Brandon	1765123239 using! Report Comment
Viva	1765089299 using! Report Comment
sai	1765066777 USING ! TY Report Comment
soapie	1765051834 usinggg Report Comment
HarryMason	1765048077 USING !! Report Comment
PastelPrince	1764977411 Using!! Report Comment
RealYukari2	1764950584 using! Report Comment
40vei	1764821978 Usingg Report Comment
☆ J o l i e - A n n ☆	1764402748 Usingg! Report Comment
Gl1tt3r	1764348478 using!! Report Comment
𖤐𝐕𝐚𝐥𖤐	1764300259 Usando! Report Comment
Moonkitsune	1764120525 love it, using Report Comment
DitzyDenise	1764113954 using Report Comment
ᛝ⁺ ˡᵘⁿᵃᵗⁱᶜᵏ♱‧⁺🇧🇷	1764093872 usandooo Report Comment
kwittyz	1764050205 using Report Comment
brrreadsticks	1763994542 using !! Report Comment
firkena!soncideq	1763993053 usingg!!!! Report Comment
𝓢𝓽𝓪𝓻 ⛥	1763918550 Using!!! Report Comment
mellow	1763839287 usingg !! thanks Report Comment