Анимация карточки-конверта CSS и HTML

Сегодня напишем с вами анимацию карточки-конверта. Пример находится в самом начале страницы. Наведите на карточку мышкой, чтобы развернуть ее. Затем уберите мышку, карточка свернется обратно.

Для создания карточки перекопируйте следующие части кодов:

                <div class="opening_card">
                    <div class="oc_title">
                        card title
                    </div>
                    <div class="oc_img">
                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                            <path d="M8.5 0L10.4084 5.87336L16.584 5.87336L11.5878 9.50329L13.4962 15.3766L8.5 11.7467L3.50383 15.3766L5.41219 9.50329L0.416019 5.87336L6.59163 5.87336L8.5 0Z" fill="#C4C4C4"/>
                        </svg>
                    </div>
                    <div class="oc_clip">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>

            

                .opening_card {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 260px;
                    height: 350px;
                    background-color: brown;
                    box-shadow: 0 0 0 5px brown, 0 25px 55px #f00;
                }
        
                .oc_title {
                    position: relative;
                    font-family: sans-serif;
                    font-size: 35px;
                    color: #333;
                    font-weight: 600;
                    text-align: center;
                    transform: scale(0);
                    transition: all 0.5s;
                    transition-delay: 0s;
                    filter: blur(10px);
                    margin: 40px 0;
                }
        
                .opening_card:hover .oc_title {
                    transform: scale(1);
                    transition-delay: 0.5s;
                    filter: blur(0);
                }
        
                .oc_img {
                    transition: all 0.5s;
                    transition-delay: 0s;
                    transform: translateY(100px);
                    filter: blur(10px);
                    opacity: 0;
                }
        
                .oc_img svg {
                    width: 50px;
                    height: 50px;
                }
        
                .opening_card:hover .oc_img {
                    transform: translateY(0);
                    filter: blur(0);
                    opacity: 1;
                    transition-delay: 1s;
                }
        
                .oc_clip {
                    position: absolute;
                    inset: 20px;
                    box-shadow: 0 0 0 18px #333;
                    transform: rotate(180deg);
                    z-index: 1;
                }
        
                .oc_clip span {
                    position: absolute;
                    inset: 0;
                    background-color: #333;
                    transition: all 0.3s;
                }
        
                .oc_clip span:nth-child(1) {
                    clip-path: polygon(0 0, 50% 33%, 100% 0);
                    transition-delay: 0s;
                }
        
                .oc_clip span:nth-child(2) {
                    clip-path: polygon(0% 0%, 37% 47%, 50% 101%, 0% 100%);
                    transition-delay: 0.25s;
                }
        
                .oc_clip span:nth-child(3) {
                    clip-path: polygon(62% 48%, 100% 0, 100% 100%, 50% 100%);
                    transition-delay: 0.5s;
                }
        
                .opening_card:hover .oc_clip span:nth-child(1) {
                    clip-path: polygon(0 0, 50% 0%, 100% 0);
                }
        
                .opening_card:hover .oc_clip span:nth-child(2) {
                    clip-path: polygon(0% 0%, 0% 100%, 50% 101%, 0% 100%);
                }
        
                .opening_card:hover .oc_clip span:nth-child(3) {
                    clip-path: polygon(100% 100%, 100% 0, 100% 100%, 50% 100%);
                }
            

После копирования вышеупомянутых кусков кода наша карточка готова.