当前位置： 首页 > article >正文

【css酷炫效果】纯CSS实现手风琴折叠效果

article 2026/3/3 11:42:15

【css酷炫效果】纯CSS实现手风琴折叠效果

  • 缘
  • 创作背景
  • html结构
  • css样式
  • 完整代码
  • 效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492015

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

    <div class="accordion"><div class="accordion-item"><input type="checkbox" id="item1" class="accordion-checkbox"><label for="item1" class="accordion-header">手风琴卡，点击展开</label><div class="accordion-content"><p>哇唔，你好棒，点击收起</p></div></div> </div>

css样式

body {font-family: Arial, sans-serif;margin: 0;padding: 0;box-sizing: border-box;
}.accordion {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;
}.accordion-item {margin-bottom: 10px;
}.accordion-checkbox {display: none;
}.accordion-header {display: block;padding: 10px;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;user-select: none;
}.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;background-color: #fff;padding: 0 10px;border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {max-height: 200px; /* 可以根据需要调整 */padding: 10px;
}

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body {font-family: Arial, sans-serif;margin: 0;padding: 0;box-sizing: border-box;
}.accordion {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;
}.accordion-item {margin-bottom: 10px;
}.accordion-checkbox {display: none;
}.accordion-header {display: block;padding: 10px;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;user-select: none;
}.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;background-color: #fff;padding: 0 10px;border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {max-height: 200px; /* 可以根据需要调整 */padding: 10px;
}
</style></head>
<body><div class="accordion"><div class="accordion-item"><input type="checkbox" id="item1" class="accordion-checkbox"><label for="item1" class="accordion-header">手风琴卡，点击展开</label><div class="accordion-content"><p>哇唔，你好棒，点击收起</p></div></div> </div></body>
</html>

效果图

在这里插入图片描述

相关文章：

【css酷炫效果】纯CSS实现手风琴折叠效果

【css酷炫效果】纯CSS实现手风琴折叠效果 缘创作背景html结构css样式完整代码效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492015 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚看到csdn出活动了&am…...

编程日记 2026/2/27 4:38:25

AI辅助的逆向分析

AI大模型结合反编译工具与AI的辅助分析能力&#xff0c;已能实现部分代码逻辑的还原与重构。 1. 技术实现路径 &#xff08;1&#xff09;二进制文件预处理与反编译 反编译工具&#xff1a;需先使用IDA Pro、Ghidra等工具将二进制文件转换为低级中间表示&#xff08;如汇编代…...

编程日记 2026/2/23 8:56:43

物理标签与逻辑标签的区别

物理标签和逻辑标签都可以被机器&#xff08;如浏览器、爬虫、屏幕阅读器&#xff09;解析和识别&#xff0c;但它们的 语义信息 对机器的意义不同。以下是详细解释&#xff1a; 1. 物理标签的解析 可以识别&#xff1a;浏览器会正确解析物理标签&#xff08;如 <b>、<…...

编程日记 2026/2/24 3:12:09

脚本语言 Lua

概念 Lua由标准C编写而成&#xff0c;几乎在所有操作系统和平台上都可以编译、运行。Lua脚本可以很容易地被C/C 代码调用&#xff0c;也可以反过来调用C/C的函数&#xff0c;这使得Lua在应用程序中可以被广泛应用。Lua并没有提供强大的库&#xff0c;它是不适合作为开发独立应…...

编程日记 2025/12/21 9:12:27

《Linux 网络架构：基于 TCP 协议的多人聊天系统搭建详解》

一、系统概述 本系统是一个基于 TCP 协议的多人聊天系统&#xff0c;由一个服务器和多个客户端组成。客户端可以连接到服务器&#xff0c;向服务器发送消息&#xff0c;服务器接收到消息后将其转发给其他客户端&#xff0c;实现多人之间的实时聊天。系统使用 C 语言编写&#x…...

编程日记 2026/2/16 2:58:40

目前主要虚拟世界平台在单一实例承载人数和伺服器架构的综合比较分析（从开资料和技术推估）：

目前主要虚拟世界平台在单一实例承载人数和伺服器架构的综合比较分析&#xff08;从开资料和技术推估&#xff09;&#xff1a; 1. 《Fortnite》&#xff08;Epic Games&#xff09; 一般游戏模式约 100人/场&#xff0c;但大型活动&#xff08;如演唱会&#xff09;采用分层串…...

编程日记 2025/11/26 4:32:53

鸿蒙NEXT项目实战-百得知识库04

代码仓地址&#xff0c;大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点&#xff1a; 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…...

编程日记 2026/2/18 14:27:55

函数的介绍

1.函数的概念 在C语言中也有函数的概念&#xff0c;有些翻译为&#xff1a;子程序&#xff0c;这种翻译更为准确。C语言的函数就是一个完成某项特定的任务的一小段代码。这段代码是有特殊的写法和调用方法的。 C语言的程序其实是有无数个小的函数组合而成的&#xff0c;也可以…...

编程日记 2026/2/22 13:20:33

源自Deformable Convolutional Networks的一种可变形卷积实现解析

衍生记录&#xff1a;深度学习pytorch之简单方法自定义9类卷积即插即用 文章目录 概述1. 可变形卷积的背景2. DeformConv2D概述2.1 构造函数分析2.2 前向传播函数解析2.2.1 偏移量的计算与应用2.2.2 目标位置的计算2.2.3 四个角的插值2.2.4 双线性插值的权重2.2.5 特征图的采样…...

编程日记 2026/2/15 19:46:23

记一次性能调优-20250320

2月份年后上班&#xff0c;刚过完年&#xff0c;还没从喜悦中解放出来&#xff0c;凌晨3点的时候同事就给我打电话&#xff0c;晚上的批量处理任务卡住了&#xff0c;快帮忙看看&#xff0c;做了几分钟的心里建设之后从被窝爬起来&#xff0c;看着手机上好几电话&#xff0c;赶…...

编程日记 2025/9/11 10:37:37

Postman高级功能深度解析：Mock Server与自动化监控——构建高效API测试与监控体系

引言&#xff1a;Postman在API开发中的核心价值 在数字化时代&#xff0c;API&#xff08;应用程序编程接口&#xff09;已成为系统间交互的“神经网络”&#xff0c;其质量直接影响用户体验与业务连续性。然而&#xff0c;传统API测试面临两大挑战&#xff1a; 开发阶段依赖…...

编程日记 2026/1/24 13:07:55

【最后203篇系列】020 rocksdb agent

今天还是挺开心的一天&#xff0c;又在工具箱里加了一个工具。嗯&#xff0c;但是快下班的时候也碰到一些不太顺心的事&#xff0c;让我有点恼火。我还真没想到一个专职的前端&#xff0c;加测试&#xff0c;以及其他一堆人&#xff0c;竟然不知道后端返回的markdown,在前端渲染…...

编程日记 2026/3/2 3:58:19

OpenCV旋转估计（2）用于自动检测波浪校正类型的函数autoDetectWaveCorrectKind()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::detail::autoDetectWaveCorrectKind 是 OpenCV 中用于自动检测波浪校正类型的函数&#xff0c;它根据输入的旋转矩阵集合来决定使用哪种波浪…...

编程日记 2025/9/7 2:42:37

mysql-connector-python 报错(0xC0000005)

报错情况&#xff1a; 原因&#xff1a; mysql-connector-python版本不对&#xff0c;我们的mysql版本为sql8.0需要下载mysql-connector-python8.0....的库 方法&#xff1a; pip install mysql-connector-python8.1.0 即可...

编程日记 2026/2/14 21:08:06

从零开始实现Stable Diffusion本地部署

1. 依赖安装 文件打包下载地址&#xff08;Stable Diffusion&#xff09; # git &#xff1a; 用于下载源码 https://git-scm.com/downloads/win # Python 作为基础编译环境 https://www.python.org/downloads/ # Nvidia 驱动&#xff0c;用于编译使用GPU显卡硬件 https://ww…...

编程日记 2026/2/22 15:14:31

RAG各类方法python源码解读与实践:利用Jupyter对RAG技术综合评测【3万字长文】

检索增强生成&#xff08;RAG &#xff09;是一种结合信息检索与生成模型的混合方法。它通过引入外部知识来提升语言模型的性能&#xff0c;从而提高回答的准确性和事实正确性。为了简单易学&#xff0c;不使用LangChain框架或FAISS向量数据库&#xff0c;而是利用Jupyter Note…...

编程日记 2026/2/14 21:38:47

transform C++标准库算法用法（对容器中元素进行转换操作：大小写转换、向量的加法乘法运算）

std::transform 是 C 标准库中的一个算法&#xff0c;用于对容器&#xff08;如数组、向量、字符串等&#xff09;中的元素进行转换操作&#xff0c;并将结果存储到指定的目标位置。它可以对单个范围或两个范围的元素进行操作&#xff0c;并将结果写入另一个容器。 1. 头文件 …...

编程日记 2025/7/19 9:10:00

Java File 类与文件操作

一、引言 在 Java 编程中，文件操作是一项非常常见且重要的任务。无论是读取配置文件、保存用户数据，还是进行日志记录，都离不开对文件的操作。Java 提供了 File 类来表示文件和目录的抽象路径名，通过该类可以对文件和目录进行创建、删除、重命名等操作。同时，Java 还提供…...

编程日记 2025/7/17 22:14:15

Python 字符串的编码格式

在 Python 中，字符串（str）默认使用 Unicode 编码，具体来说，Python 3 中的字符串是以 UTF-8 编码存储的 Unicode 字符序列。Unicode 是一种国际标准，旨在为世界上所有的字符提供唯一的编码，而 UTF-8 是 Unicode 的一种实现方式，具有兼容性和高效性。 1. Unicode 与 UTF-…...

编程日记 2025/7/18 4:02:00

RPA+AI 技术到底好在哪里？

在自动化领域&#xff0c;RPA与生成式AI都是强大的技术&#xff0c;都可以用来实现自动执行重复耗时的任务。 主要区别是&#xff1a;传统RPA擅长处理结构化与规则明确简单的流程&#xff0c;而在非结构化数据处理、动态上下文适应、智能决策等能力上有欠缺&#xff1b;而基于…...

编程日记 2026/2/20 12:46:14

flowable适配达梦7 (2.1)

经过第一版的问题解决&#xff0c;后端项目可以启动&#xff0c;前端页面也集成进去。 前端在流程设计页面报错 之后发现主要是组件中modelerStore这个值没有 解决方法:在data增加对象 给component/process/designer.vue 中涉及到的每个子组件传入 :modelerStore“modeler…...

编程日记 2026/2/15 0:12:34

基于java的ssm+JSP+MYSQL的母婴用品网站(含LW+PPT+源码+系统演示视频+安装说明)

系统功能 管理员功能模块&#xff1a; 主页 个人中心 用户管理 商品分类管理 商品信息管理 留言板管理 成长交流 系统管理 订单管理 留言管理 用户功能模块&#xff1a; 主页 个人中心 我的收藏管理 订单管理 前台首页功能模块&#xff1a; 首页 商品信息 论…...

编程日记 2026/2/14 0:03:53

面试八股 —— Redis篇

重点&#xff1a;缓存 和 分布式锁 缓存&#xff08;穿透&#xff0c;击穿&#xff0c;雪崩&#xff09; 降级可作为系统的保底策略&#xff0c;适用于穿透&#xff0c;击穿&#xff0c;雪崩 1.缓存穿透 2.缓存击穿 3.缓存雪崩 缓存——双写一致性 1.强一致性业务&#xff08…...

编程日记 2026/2/15 0:36:35

gradle-8.13

gradle-8.13 稍微看了下&#xff0c;基于Maven改造的 https://gradle.org/install/https://github.com/gradle/gradle-distributions/releaseshttps://github.com/gradle/gradle-distributions/releases/download/v8.13.0/gradle-8.13-all.zip https://github.com/gradle/gra…...

编程日记 2026/3/3 11:20:20

不使用负压电源，ADC如何测量正负压？

电路图来自ZLinear的开源数据采集板卡DL8884_RFN&#xff0c;是一个比较常见的电压偏置采集法 对电路进行分析&#xff0c;所以说可以先看下采集卡的模拟输入部分的参数如下&#xff1a; 通道数量: 8通道单端输入/4通道差分输入 分辨率: 16位逐次逼近型(SAR) ADC 采样速率: 40…...

编程日记 2026/3/3 0:47:21

在 Linux 系统上部署 Deepseek AI 的全面指南‌

对于所有希望亲身体验 AI 魅力的玩家来说&#xff0c;本文将提供一个详尽的教程&#xff0c;指导你在 Linux 系统上部署 Deepseek AI。无论你是技术小白还是有一定基础的用户&#xff0c;都能轻松跟随本文完成部署。 ‌一、关于 Ollama‌ Ollama 是一款功能强大的开源应用&am…...

编程日记 2025/12/25 6:32:55

SinoSteel生产企业ERP实施建议书final（143页PPT）（文末有下载方式）

资料解读&#xff1a;SinoSteel 生产企业 ERP 实施建议书 final 详细资料请看本解读文章的最后内容。 在当今竞争激烈的商业环境中&#xff0c;企业的信息化建设对于提升竞争力和实现可持续发展至关重要。中钢集团作为一家大型跨国企业集团&#xff0c;在钢铁行业占据重要地位。…...

编程日记 2026/2/22 5:56:19

贴片陶瓷天线和蓝牙天线的layout注意事项

板载天线&#xff0c;也有封装成器件进行使用&#xff1a; 看到这里&#xff0c;细心的人发现&#xff0c;天线接入芯片的时候&#xff0c;旁边也直接接地了&#xff1a; F型天线&#xff08;Inverted F Antenna, IFA&#xff09;的一端接地&#xff0c;看起来像是“短路”&am…...

编程日记 2026/3/1 0:26:06

关于波士顿动力2025年3月的人形机器人最新视频

这是完整的视频&#xff1a; 波士顿动力最新逆天表演-机器人Atlas行走、奔跑、爬行、杂技_哔哩哔哩_bilibili 至少从目前来看&#xff0c;综合对比运动的幅度、各关节的协调性、整体的顺遂性、动作的拟人程度&#xff0c;波士顿动力是已知人形机器人中最好的。 尤其需要关注…...

编程日记 2026/2/28 14:20:46

fontTools工具的使用介绍

前言 python工具库fontTools&#xff0c;我是用来压缩前端字体的&#xff0c;优化前端请求速度的&#xff1b;使用的过程中&#xff0c;遇到了不少的坑&#xff0c;把这个过程记录下来&#xff0c;防止再犯。 安装 # fontTools 4.56.0 pip install fontTools提取子字体集 方…...

编程日记 2025/12/19 3:02:00