本文主要是介绍【HTML】模拟消息折叠效果【附源代码】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文件结构
收起效果
展开效果
HTML部分
HTML部分定义了网页的结构和内容。
<!DOCTYPE html>声明了文档类型和HTML版本。<html>元素是所有其他HTML元素的父元素。<head>元素包含了文档的元数据，如字符集、视口设置、标题和链接的样式表。<body>元素包含了可见的页面内容。<ul>和<li>元素创建了一个无序列表，用于显示消息。<div>元素用于分组内容，如消息的标题和时间。<i>元素用于显示图标字体。<h4>和<div>元素分别用于显示消息的发送者和消息内容。
CSS部分
CSS部分定义了网页的外观和样式。
*选择器设置所有元素的默认边距、填充和盒模型。body选择器设置了页面的整体布局和背景。ul选择器设置了列表的宽度、3D变换样式和光标样式。ul li选择器设置了列表项的定位、外观和过渡效果。ul li .title选择器设置了消息标题的布局。ul li .title i和ul li .title .time选择器分别设置了图标和时间的样式。ul li:nth-child()选择器通过使用:nth-child伪类选择器，为不同的列表项设置不同的层叠上下文、透明度、变换和背景透明度，以创建3D堆叠效果。ul.active li和ul.active li:nth-child()选择器通过添加.active类到<ul>元素上，改变列表项的颜色、背景和位置，以实现折叠和展开效果。
JavaScript部分
JavaScript部分负责页面的交互性。
const ul = document.querySelector("ul")通过document.querySelector方法获取页面中的<ul>元素。ul.addEventListener('click', () => { ... })为<ul>元素添加一个点击事件监听器，当<ul>被点击时，会执行一个匿名函数。ul.classList.toggle('active')在点击事件发生时，通过classList.toggle方法切换<ul>元素的active类。如果<ul>元素已经有active类，它会移除这个类；如果没有，它会添加这个类。这个操作会触发CSS中定义的折叠和展开效果。
Html 部分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟消息折叠效果</title><link rel="stylesheet" href="./fonts/iconfont.css"><link rel="stylesheet" href="./style.css">
</head><body><ul><li><div class="title"><div><i class="iconfont icon-weixin"></i> 微信</div><div class="time">30分钟前</div></div><h4>D</h4><div>Hello</div></li><li><div class="title"><div><i class="iconfont icon-weixin"></i> 微信</div><div class="time">50分钟前</div></div><h4>C</h4><div>Hello</div></li><li><div class="title"><div><i class="iconfont icon-weixin"></i> 微信</div><div class="time">1小时前</div></div><h4>B</h4><div>Hello</div></li><li><div class="title"><div><i class="iconfont icon-weixin"></i> 微信</div><div class="time">2小时前</div></div><h4>A</h4><div>Hello</div></li></ul><script src="./style.js"></script></body></html>
CSS 部分
* {margin: 0;padding: 0;box-sizing: border-box;
}ul {list-style: none;
}body {display: flex;height: 100vh;justify-content: center;padding-top: 80px;background-size: cover;perspective: 1000px;
}ul {position: relative;width: 400px;transform-style: preserve-3d;cursor: pointer;
}ul li {position: absolute;left: 0;top: 0;width: 100%;padding: 12px;background: rgba(255, 255, 255, .7);border-radius: 15px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .05);backdrop-filter: blur(20px);transition: .6s;
}ul li .title {display: flex;justify-content: space-between;
}ul li .title i {font-size: 18px;color: #4acfae;
}ul li .title .time {color: #666;
}ul li:nth-child(2) {z-index: -1;color: transparent;transform: translateY(8px) translateZ(-24px);background: rgba(255, 255, 255, .6);
}ul li:nth-child(3) {z-index: -2;color: transparent;transform: translateY(16px) translateZ(-48px);background: rgba(255, 255, 255, .5);
}ul li:nth-child(4) {z-index: -3;color: transparent;transform: translateY(24px) translateZ(-72px);
}ul.active li {color: #000;background: rgba(255, 255, 255, .7);
}ul.active li:nth-child(2) {transform: translateY(calc(100% + 8px));
}ul.active li:nth-child(3) {transform: translateY(calc(200% + 16px));
}ul.active li:nth-child(4) {transform: translateY(calc(300% + 24px));
}
JavaScript 部分
const ul = document.querySelector("ul")
ul.addEventListener('click', () => {ul.classList.toggle('active')
})
这篇关于【HTML】模拟消息折叠效果【附源代码】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
