如何使用 HTML 和 CSS 在悬停时创建纸角折叠效果？

折叠效果在网站上相当吸引人，可能你在某些网站上看到过，当你将鼠标悬停在分页布局上时，它会折叠在角落里。折角效果只能使用HTML和CSS来实现。以下部分将指导您如何创建动画。在本文中，我们将文章分为两部分，第一部分我们将创建基本结构。在第二部分，我们将装饰结构。
创建结构：在本节中，我们将仅使用 HTML 来创建将使用角折叠效果的结构。

• HTML 代码：在本节中，我们将使用div 标签创建一个基本的 div，并为其指定一个类名。

HTML

 

    
    

 

    
        

            GeeksforGeeks
        
        
            Paper corner fold effect on hover
            by using HTML and CSS
        
        

            

            A Computer Science Portal for Geeks
        
    

 

设计结构：在本节中，我们将仅使用 CSS 来装饰上一节中已经创建的结构。

• CSS 代码：在本节中，我们将首先设置没有折叠效果的基本 div 元素的样式，然后我们将使用CSS ::after伪元素来创建折叠效果。将位于 div 框的右上角，将顶部和右侧边框设置为与父 div 元素的背景颜色匹配的颜色。然后为左侧和底部边框赋予更深的 div 背景颜色阴影，当我们将鼠标悬停在框上时，我们还将使用悬停选择器来创建折叠效果。

CSS

最终解决方案：是上面两个编码部分的组合，结合上面的部分，我们在悬停时创建了折叠角效果。

HTML

 

    
    
    

 

    
        

            GeeksforGeeks
        
        
            Paper corner fold effect on hover
            by using HTML and CSS
        
        

            

            A Computer Science Portal for Geeks
        
    

 

输出：