📌  相关文章
📜  如何使用 HTML 和 CSS 创建图像折叠效果?

📅  最后修改于: 2021-11-03 10:48:29             🧑  作者: Mango

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

方法

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

HTML代码:

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



    


    

IMAGE FOLDING EFFECT

    
            
  •         
  •         
  •         
  •     


style.css
*{
    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;
}


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;
}

输出:

图像折叠效果