Skip to content
Advertisements

I Love You 3000

OVERVIEW:

https://codepen.io/guldus/pen/WBeOPZ

HTML

    <div class="thanos">
        <div class="but">Stop!
            <img>
        </div>
        <div class="thanks">I LOVE YOU 3000</div>
        <div class="all">
            <div class="ironMan"></div>
            <div class="particle"></div>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Marvel');
body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Marvel', sans-serif;
}
.ironMan{
    width: 400px;
    height: 500px;
    background-image: url("58569ca74f6ae202fedf2752.png");
    background-size: cover;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: left;
    opacity: 1;
}
.click .ironMan{
    left: 52%;
    opacity: 0;
    transition: 14s;
    filter: blur(10px);
    transition-delay: 8s;
}
.particle{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(20%) scaleX(0);
    background-image: url("particle.png");
    background-size: cover;
    width: 1000px;
    height: 525px;
    transform-origin: left;
    z-index: 99;
    cursor: pointer;
    transition: 20s;
    transition-delay: 4s;
}
.click .particle{
    left: 45%;
    transform: translateX(-50%) scaleX(1);
}
.thanks{
    position: absolute;
    top: 30%;
    left: 45%;
    transform: translateX(-50%);
    font-size: 25px;
    transform-origin: center;
    opacity: 0;
    cursor: pointer;
}
.click .thanks{
    animation-delay: 4s;
    animation: ani 20s linear;
}
@keyframes ani{
    0%{ opacity: 0; transform: scale(10)}
    20%{ opacity: .5;}
    40%{ opacity: 1;}
    75%{ opacity: 1;}
    100%{ opacity: 0; transform: scale(0)}
}

JS

    
    $(".but").click(function(){
        $(".thanos").addClass("click");
        $("img").attr("src","tenor.gif");
        setTimeout(function(){
            $("img").attr("src","");
        },4000)
    })

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: