如何使用 HTML 和 CSS 创建图像折叠效果？

在本文中，我们将在主图像下方创建图像折叠效果。这是一个简单的项目，我们只能通过使用 HTML 和 CSS 来实现我们的目标。

方法：

• 创建我们在其中创建 4 个列表标签的主 div。
• 使用 nth-child() 选择器属性为不同的列表项提供不同的样式。

HTML代码：

1. 首先，我们创建一个 HTML 文件 (index.html)。
2. 然后我们将提供所有动画效果的 CSS 文件链接到我们的 HTML。
   它也被放置在标签内。
3. 来到我们 HTML 代码的正文部分。
   • 首先，我们正在向我们的页面提供标题。
   • 然后，我们必须创建一个无序列表，其中有 5 个列表项，这些项进一步用于存储图像。

index.html

    


    
IMAGE FOLDING EFFECT
    

        

        

        

        

    

CSS 代码： CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都是交互的。
在CSS中，我们必须记住以下几点。

• 恢复所有浏览器效果。
• 使用类和 id 为 HTML 元素赋予效果。
• 使用 nth-child() 选择器属性为不同的列表项提供不同的样式。

样式文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(9, 138, 57);
    list-style: none;
}
  
h1{
    display: flex;
    justify-content: center;
    margin: 2em;
}
  
.un-list{
    width: 40em;
    height: 20em;
    top: 50%;
    left: 50%;
    transform: translate(120%,50%);
    display: flex;
}
  
.lis{
    width: 100em;
    height: 30em;
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210310024310/img1.png"
    );
    background-size: cover;
}
  
.lis:nth-child(even){
    transform: skewY(-40deg);
}
  
.lis:nth-child(odd){
    transform: skewY(40deg);
}
  
.lis:nth-child(1){
    border-left: blanchedalmond 0.2em solid;
    background-position: 0;
    border-right: blanchedalmond 0.2em solid;
}
  
.lis:nth-child(2){
    background-position: -8em;
    border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(3){
    background-position: -16em;
    border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(4){
    background-position: -24em;
    border-right: blanchedalmond 0.2em solid;
}

输出：

图像折叠效果