HTML和CSS做一个无脚本的手风琴页面（保姆级）

Book_熬夜！2024-09-23 9:54

一、前言

使用HTML和CSS做一个无脚本的手风琴页面。让知识以自己喜欢的方式进入脑子，适用于很多场景，比如以下：

【注：图片源自百度】

二、HTML框架

使用外部样式表，将CSS文件用link标签引入

整体框架如下图：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My_First</title>
    
	<!-- 将css引入 -->
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    <section class="container">
        <div class="category_container">
            <div class="content">
                <img src="./painter.jpg" alt="painter" class="professio_image">
                <img src="./painter2.jpg" alt="painter2" class="profile_image">
                <div class="profile_detail">
                    <span>Painter Qi Yu</span>
                    <p>"Lemuria's greatest painter"</p>
                </div>

                <div class="wrapper">
                    <div class="profile_quote">
                        <p>"Put the love I feel on paper, trace my bodyguard lady, you are my Muse goddess."</p>
                    </div>
                </div>
            </div>

            <div class="content">
                <img src="./photographer.jpg" alt="photographer" class="professio_image">
                <img src="./photographer2.jpg" alt="photographer2" class="profile_image">
                <div class="profile_detail">
                    <span>Photographer Qi Yu</span>
                    <p>The bodyguard lady's own photographer</p>
                </div>

                <div class="wrapper">
                    <div class="profile_quote">
                        <p>"You promise me: I will never let Qi Yu wait for me again."</p>
                    </div>
                </div>
            </div>

            <div class="content">
                <img src="./sculptor.jpg" alt="sculptor" class="professio_image">
                <img src="./scluptor2.jpg" alt="scluptor2" class="profile_image">
                <div class="profile_detail">
                    <span>Sculptor Qi Yu</span>
                    <p>For you to trace, shine</p>
                </div>

                <div class="wrapper">
                    <div class="profile_quote">
                        <p>"You are the bride of the only sea god in Lemuria, and I will paint your face."</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

三、CSS装饰

1.全局设置

在谷歌字体库中导入合适的字体

css 复制代码 
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

使用通配符选择器，将所有元素的内边距和外边距重置为0；

指定body部分使用导入的Inter字体；

使用CSS变量定义两个颜色变量，浅色和深色

css 复制代码 
/*通配符选择器，查找页面所有标签设置相同样式*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*指定body部分使用导入的Inter字体，备用字体sans-serif*/
body {
  font-family: "Inter", sans-serif;
}

/*使用CSS变量定义两个颜色变量，浅色和深色*/
:root {
  --light: #ffe6e6;
  --dark: #0c0c0c;
}


【补充：选择器】

  • 标签选择器：使用标签名作为选择器，选中同名标签设置相同的样式

  • 类选择器：查找标签，差异化设置标签的显示效果，一个类选择器可以定义多个标签，一个标签允许加多个class属性

  • id选择器：查找标签，差异化设置标签的显示效果，一般与JS配合使用，很少使用CSS样式

  • 通配符选择器：查找页面所有标签，设置相同样式，注意不需要调用，浏览器自动查找页面所有标签，设置相同的格式。

    使用场景：在制作网页的初期，清楚标签默认样式，便于后续个性化设置。

2.盒子设置

css 复制代码 
/* 定义container类选择器 */
.container {
    /* 一个径向渐变背景*/
  --bg-color: radial-gradient(
  	circle at 50% 0%,
  	rgba(50, 50, 50, 1) 0%,
  	rgba(12, 12, 12, 1) 100%
  );
  /* 限制子元素溢出部分*/
  overflow: clip;
  position: relative;
  /*一个弹性盒子模型布局，子元素会居中对齐*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 5rem;
  width: 100%;
  /* 容器的高度是设备屏幕视口的100%高度*/
  height: 100dvh;
  background-image: var(--bg-color);
}

/*  定义category_container类选择器*/
.category_container {
  --gap: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  /*  定义了子元素之间的间距*/
  gap: calc(var(--gap) * 2);
  width: 100%;
  height: 100%;
}

/* 定义content类选择器*/
.content {
  /* 定义初始状态为非活动的变量*/
  --active: 0;
  cursor: pointer;
  overflow: clip;
  position: relative;
  z-index: 10;
  display: flex;
  /*  子元素垂直排列 */
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 2.5rem;
  /* 宽度为容器的三分之一，设置动画效果，宽度在鼠标悬停时会变化*/
  width: calc((100% / 3) - var(--gap));
  height: 100%;
  border-radius: 1rem;
  transition: width 0.5s ease-in-out;
}

/* 当鼠标悬停在.content元素上，--active变为1，content元素的宽度扩大到容器的70% */
.content:hover {
  --active: 1;
  width: calc(70% - var(--gap));
}

 /* content伪类选择器，用之前定义的深色覆盖整个.content区域，并设置为半透明 */
.content::before {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  opacity: 0.6;
}

3.图片设置

css 复制代码 
/* 设置背景图片，覆盖整个容器，图片根据容器尺寸裁剪，居中显示 */
.content img {
  position: absolute;
  z-index: -20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* profile_image的透明度随着--active状态变化，鼠标悬停时图片逐渐变成透明度为0*/
.content .profile_image {
  opacity: calc(1 - var(--active));
  transition: opacity 0.3s ease-in-out;
}

4.段内设置

css 复制代码 
/* 包含span、p标签，设置个人信息，垂直排列，子元素之间的间距，并有动画效果*/
.profile_detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.profile_detail span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light);
  text-wrap: nowrap;
}

.profile_detail p {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light);
}

/* 个人引用处的文本块，鼠标悬停时会向上移动并显示 */
.profile_quote {
  width: 22rem;
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
}

.profile_quote p {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light);
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;
}

/* 通过grid布局，默认grid-template-rows为0，隐藏内容，当鼠标悬停时，展开并显示内容 */
.wrapper {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.profile_quote {
  min-height: 0;
  transform: translateY(50%);
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.content:hover .wrapper {
  grid-template-rows: 1fr;
}

.content:hover .profile_quote {
  transform: none;
  opacity: 1;
}

/* 作为弹窗显示，背景透明，文字颜色为白色，没有边框*/
dialog {
  position: absolute;
  z-index: 1;
  background: none;
  color: white;
  border: 0;
  font-size: 0.8rem;
  padding: 0.5em;
}

dialog a {
  color: whitesmoke;
}

四、最终效果

相关推荐
儒雅的烤地瓜20 分钟前
CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?
css·fouc·无样式内容闪烁问题·css预加载
yery35 分钟前
Ubuntu24.04中安装Electron
前端·javascript·electron
小夏同学呀39 分钟前
使用elementplus中的分页器，后端一次性返100条数据，前端自己做分页处理，vue3写法
前端·javascript·vue.js
Mr.Lee082142 分钟前
electron-vite使用vue-i18n，ts 检查报错上不存在属性“$t”
前端·javascript·vue.js·typescript·electron
你的Maya1 小时前
使用 Vite 打包工具库并使用 GitHub Actions 自动化发布npm流程
前端·npm·github
zzzzzzzziu1 小时前
vue3基础
前端·javascript·vue.js
D@.2 小时前
HTML与JavaScript结合实现简易计算器
服务器·javascript·计算机·html
Jasonakeke2 小时前
【JavaWeb】二、HTML 入门
前端·html
2301_796143792 小时前
Vue的指令v-model的原理
前端·javascript·vue.js
anyup_前端梦工厂2 小时前
探索 Web Speech API：实现浏览器语音识别与合成
前端·javascript·html
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05CCF-CSP认证考试 202406-3 文本分词 100分题解06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【SCS-CN】SCS-CN模型中CN值的确定08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步