You have never seen this modern website before.

#uiweekly #ux #webdev #css

Demo

I suggest you so see this effect in new window mode. And yeah its not responsive but you can make it. Click on the top right most button to view this in new window mode.

Video Tutorial : )

Let's have a look how to code this

To create this website animation we use HTML, CSS, and few lines of Javascript so let's get started.

First make a file index.html and write HTML basic structure.
Now in body tag we will create a div and give it a class mail. And inside of that mail div we make two span. And give them class. Like this

<div class="mail">
        <span class="line"></span>
        <span class="line two"></span>
</div>

now let's add some style to it. Make style.css and link it to the index.html file. And give some styling.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: hidden;
    background: #000;
}

.mail{
    width: 200px;
    height: 120px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    clip-path: polygon(52% 48%, 100% 0, 100% 100%, 0 100%, 0 0);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.line{
    position: absolute;
    width: 0%;
    height: 5px;
    background: #000;
    top: 100%;
    left: 0%;
    transform-origin: left;
    transform: rotate(-31deg);
    animation: grow-line-one 1s forwards 1;
}

@keyframes grow-line-one{
    0%{
        width: 0;
    }
    100%{
        width: 120%;
    }
}

.line.two{
    width: 0%;
    animation: none;
    top: -1%;
    left: -1%;
    transform: rotate(29deg);
    animation: grow-line-two .5s forwards 1;
    animation-delay: 1s;
}

@keyframes grow-line-two{
    0%{
        width: 0;
    }
    100%{
        width: 60%;
    }
}

So the styles above is just making our .mail div in center and giving its dimensions 200 X 120 with background color white. And we also style our .line make first span of width 120% and rotating that from bottom-left to top-right and we did same with other span but different width.
We also gave animation here where we made our spans initial width equal to 0 and with animation and animation-delay we are setting their width.

Now we have to create our mails lid that will open. So go into your index.html file and now make a span above your .mail div and class it .lid and make another span with class .mail-backside. the structure should look like this.

<span class="lid"></span>
<span class="mail-backside"></span>

Now style this

.lid,
.mail-backside{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 120px;
    background: #000;
    transform-origin: top;
    background: #fff;
    z-index: 3;
    clip-path: polygon(52% 48%, 100% 0, 0 0);
    transition: 1s;
    animation: open-lid 1s 1.5s forwards 1;
}

.mail-backside{
    z-index: -1;
    animation: none;
    background: rgb(223, 223, 223);
}

@keyframes open-lid{
    0%{
        transform: translate(-50%, -50%) rotateX(0);
        background: #fff;
    }
    100%{
        transform: translate(-50%, -50%) rotateX(-180deg);
        background: rgb(180, 180, 180);
    }
}

After this we are done almost. we just made our lid opening animation.

Now lets make our header

For header create a <header> between our .lid and .mail element inside <header> create a div of class .content and inside of that make an h1 and p and give its content as you like.

<header class="header">
      <div class="content">
            <h1 class="heading">amazing web <br>animation</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, iste placeat provident minima obcaecati facere rerum omnis quae illum, deserunt aliquam fuga vitae quibusdam! Nobis repellat tempore voluptatum ipsam itaque!</p>
      </div>
</header>

Before styling these we have to make an animation for our .mail and .lid element to get them down. For that write

@keyframes drop-down{
    0%{
        top: 50%;
        opacity: 1;
    }
    100%{
        top: 100%;
        opacity: 0;
    }
}

And then make a file app.js and link that to index.html. Write this in app.js.

const mail = document.querySelector('.mail');
const lid = document.querySelector('.lid');
const mailBack = document.querySelector('.mail-backside');

setTimeout(() => {
    mail.style.animation = `drop-down 1s forwards 1`;
    lid.style.top = `100%`;
    lid.style.opacity = 0;
    mailBack.style.animation = `drop-down 1s forwards 1`;
}, 2500);

so what we did in this js is that we select our .mail, .lid, .mail-backside elements and give them animation to go down out off the screen after 2500ms.

Now its time to style our header. So write this.

.header{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.14);
    background: url('bg.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: roboto, sans-serif;
    animation: scale-up 1s 3.2s forwards 1;
}

@keyframes scale-up{
    0%{
        transform: translate(-50%, -50%) scale(0.14);
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
    }
}

.content{
    width: 60%;
    text-align: center;
    color: #fff;
    opacity: 0;
    animation: fade-in 1s 4.2s forwards 1;
}

@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.heading{
    font-size: 100px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.content p{
    font-size: 20px;
    text-align: center;
}

And Now its done. We made this awesome looking animation. I hope you understand each and everything. If you find any mistake I made feel free to tell me out in the comments.