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 866 comments ( View all | Add Comment )

kasper / fran	1761181549 using! Report Comment
Cuteorangepie	1761065623 using Report Comment
4lex4ndr88	1761029513 Usandoo Report Comment
scarletttt_	1760976101 using Report Comment
scarletttt_	1760976101 using Report Comment
Luc1a!!! XDDD	1760922636 usingg :33 Report Comment
SamTheHam	1760799713 cutee yess using Report Comment
K1tty :3	1760795683 using! Report Comment
samyang8	1760794743 usingggg, ilysm for making thisss Report Comment
𝕯𝖞𝖉𝖞 愛	1760418334 Lo usaré! Report Comment
JayJay >:]	1760370365 usingggggggggggggggggg Report Comment
strawberry_kitty	1760323149 Using:3 Report Comment
Neula?! -_-	1760277162 Usinggg!! Report Comment
lindor_chocolates	1760203295 using!!:3 Report Comment
0o0MAR10	1760060922 USING! :D Report Comment
grief	1759914044 using<3<3 Report Comment
₊‧°𐐪♡𐑂°‧₊	1759908158 using<333 Report Comment
𓂃⟡ ݁ ꒰Ayumi꒱ ⸝⸝ .ᐟ .	1759655283 using Report Comment
riri !! ☆	1759612381 using Report Comment