0
点赞
收藏
分享

微信扫一扫

C++:命名空间

JakietYu 2024-08-27 阅读 30
htmlcsscss3
文件结构

在这里插入图片描述

收起效果

在这里插入图片描述

展开效果

在这里插入图片描述

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 iul li .title .time 选择器分别设置了图标和时间的样式。
  • ul li:nth-child() 选择器通过使用:nth-child伪类选择器,为不同的列表项设置不同的层叠上下文、透明度、变换和背景透明度,以创建3D堆叠效果。
  • ul.active liul.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')
})
举报

相关推荐

0 条评论