Как создать эффект загиба угла бумаги при наведении курсора с помощью HTML и CSS?

Опубликовано: 17 Декабря, 2021

Эффект сворачивания на веб-сайте довольно привлекателен, возможно, вы видели на некоторых веб-сайтах, когда вы наводите курсор на макет страницы, он складывается в углу. Эффект складывания углов может быть достигнут только с помощью HTML и CSS. В следующих разделах вы узнаете, как создать анимацию. В этой статье мы разделим статью на два раздела, в первом разделе мы создадим базовую структуру. Во втором разделе мы украсим конструкцию.

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

HTML-код: в этом разделе мы создадим базовый div, используя тег div, присвоив ему имя класса.

 <!DOCTYPE html>
 < html lang = "en" dir = "ltr" >
 
< head >
    < meta charset = "utf-8" >
    < title >
        Paper corner fold effect on hover
        by using HTML and CSS
    </ title >
 </ head >
 
< body >
    < center >
        < h1 >
            GeeksforGeeks
        </ h1 >
        < b >
            Paper corner fold effect on hover
            by using HTML and CSS
        </ b >
        < div class = "Fold" >
            < h3 >
            A Computer Science Portal for Geeks</ h3 >
        </ div >
    </ center >
 </ body >
 
</ html > 

Структура дизайна: в этом разделе мы будем использовать только CSS для украшения структуры, которая уже создана в предыдущем разделе.

Код CSS: в этом разделе мы сначала стилизуем базовый элемент div без эффекта сворачивания, а затем для создания эффекта сворачивания мы будем использовать псевдоэлемент CSS :: after . который будет расположен в верхнем правом углу блока div, верхняя и правая границы будут установлены в цвета, соответствующие цвету фона родительского элемента div. левой и нижней границам будет присвоен более темный оттенок цвета фона div, мы также будем использовать селектор при наведении курсора , чтобы создать эффект сворачивания при наведении курсора мыши на поле.

 <style>
        h 1 {
            color : green ;
        }
         
        .Fold {
            position : absolute ;
            left : 50% ;
            top : 55% ;
            transform: translate( -50% , -50% );
            width : 400px ;
            height : 200px ;
            background-color : #4EE73C ;
        }
         
        h 3 {
            margin : 20px ;
            padding : 20px ;
        }
         
        .Fold:after {
            position : absolute ;
            content : '' ;
            right : 0 ;
            top : 0 ;
        }
         
        .Fold:hover:after {
            transition-duration: 1 s;
            border-bottom : solid black 50px ;
            border-right : solid white 50px ;
        }
 </style>

Окончательное решение: это комбинация двух вышеуказанных разделов кодирования, y объединяя вышеуказанный раздел, мы создали эффект загнутого угла при наведении курсора.

 <!DOCTYPE html>
 < html lang = "en" dir = "ltr" >
 
< head >
    < meta charset = "utf-8" >
    < title >
        Paper corner fold effect on hover
        by using HTML and CSS
    </ title >
    < style >
        h1 {
            color: green;
        }
         
        .Fold {
            position: absolute;
            left: 50%;
            top: 55%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 200px;
            background-color: #4EE73C;
        }
         
        h3 {
            margin: 20px;
            padding: 20px;
        }
         
        .Fold:after {
            position: absolute;
            content: '';
            right: 0;
            top: 0;
        }
         
        .Fold:hover:after {
            transition-duration: 1s;
            border-bottom: 50px solid black;
            border-right: 50px solid white;
        }
    </ style >
 </ head >
 
< body >
    < center >
        < h1 >
            GeeksforGeeks
        </ h1 >
        < b >
            Paper corner fold effect on hover
            by using HTML and CSS
        </ b >
        < div class = "Fold" >
            < h3 >
            A Computer Science Portal for Geeks</ h3 >
        </ div >
    </ center >
 </ body >
 
</ html > 

Выход:

Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

Как создать эффект загиба угла бумаги при наведении курсора с помощью HTML и CSS?

РЕКОМЕНДУЕМЫЕ СТАТЬИ