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

A	1784052757 US1NG THX :3 Report Comment
Widra	1783880967 USING! Report Comment
DANICA!	1783851028 USING! <3 Report Comment
ephemeralshinee	1783792829 usinggg Report Comment
Plurmt	1783669094 uSING !! Report Comment
trinxmre ୨ৎ	1783625704 using!! tysm!! <3 Report Comment
Z ☆	1783137202 using!! :3 Report Comment
h1ghway2hell	1783073232 using Report Comment
Will!!	1783041835 using! Report Comment
davv ^3^	1782930836 using!! ^^ Report Comment
davv ^3^	1782930834 using!! ^^ Report Comment
davv ^3^	1782930829 using!! ^^ Report Comment
davv ^3^	1782930757 using!! ^^ Report Comment
~⋆˙⟡/Seraphine/✮⋆˙~	1782883907 Using!!! Report Comment
hisui :3	1782757048 Using :3 Report Comment
yumi !!	1782702919 using!! Report Comment
⋆#meishang	1782676936 ty using!!! Report Comment
- ̗̀✮ 𝔠𝔞𝔩𝔦𝔣𝔬𝔯𝔫𝔦𝔞𝔯𝔬𝔩𝔩𝔵𝔡 ₊˚୧‧	1782620836 Using :D Report Comment
Ok Ken 🌺! ✨ˎˊ˗	1782598694 Usingg Report Comment
d0!!f@ce₍ᐢ. .ᐢ₎𖹭	1782529442 Using Report Comment