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

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

Owebs
8 декабря
Просмотры 225
Рейтинг 1
Время чтения Время чтения: 6 минут

Сегодня напишем с вами анимацию карточки-конверта. 

Оглавление
Развернуть Свернуть

Как сделать анимацию карточки-конверта

card title

 

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

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

 

 

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>

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

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

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 187
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 360
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 371
Рейтинг 4
9 февраля
3 месяцев назад

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

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен