데모

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.

비디오 튜토리얼 : )

이것을 코딩하는 방법을 보자

이 웹사이트 애니메이션을 만들기 위해 HTML, CSS 및 몇 줄의 Javascript를 사용하므로 시작하겠습니다.

먼저 파일index.html을 만들고 HTML 기본 구조를 작성합니다.
이제 body 태그에서 div를 만들고 클래스 메일을 제공합니다. 그리고 그 메일 div 안에 두 개의 스팬을 만듭니다. 그리고 그들에게 수업을 제공하십시오. 이와 같이

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

이제 스타일을 추가해 보겠습니다. style.css를 만들고 index.html 파일에 연결합니다. 그리고 스타일링을 해주세요.

*{
    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%;
    }
}

따라서 위의 스타일은 .mail div를 중앙에 만들고 배경색이 흰색인 치수200 X 120를 제공합니다. 또한 너비.line의 첫 번째span 만들기120% 스타일을 지정하고 이를 왼쪽 아래에서 오른쪽 위로 회전하고 다른 너비span와 동일하지만 너비는 다릅니다.
또한 여기에서 스팬의 초기 너비를 0으로 만들고 애니메이션 및 애니메이션 지연을 사용하여 너비를 설정하는 애니메이션을 제공했습니다.

이제 열릴 메일 뚜껑을 만들어야 합니다. 따라서 index.html 파일로 이동하여 이제 .mail div 위에 스팬을 만들고 클래스.lid를 만들고 클래스.mail-backside로 다른 스팬을 만듭니다. 구조는 다음과 같아야 합니다.

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

이제 스타일을

.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);
    }
}

이 후에 우리는 거의 완료됩니다. 우리는 방금 뚜껑을 여는 애니메이션을 만들었습니다.

이제 헤더를 만들어 보겠습니다.

헤더의 경우 <header>와 .lid 요소 사이에 .mail를 만들고 <header> 클래스의 div를 만들고 .content 그 안에 h1와 p를 만들고 내용을 원하는 대로 제공합니다.

<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>

스타일을 지정하기 전에 .mail 및 .lid 요소에 대한 애니메이션을 만들어 다운시켜야 합니다. 그 쓰기를 위해

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

그런 다음 파일app.js을 만들어 index.html에 연결합니다. 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);

그래서 우리가 이 js에서 한 것은 .mail, .lid, .mail-backside 요소를 선택하고 2500ms 후에 화면에서 사라지도록 애니메이션을 제공하는 것입니다.

이제 헤더의 스타일을 지정할 차례입니다. 그래서 이것을 씁니다.

.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;
}

이제 완료되었습니다. 우리는 이 멋진 애니메이션을 만들었습니다. 하나하나 이해하시길 바랍니다. 내가 만든 오류를 발견하면 언제든지 댓글로 알려주십시오.