CSS布局案例 7-51 垂直手风琴效果

一醉南柯

已于 2024-01-04 17:02:57 修改

阅读量484

点赞数

分类专栏： Web前端开发文章标签： css 前端

于 2021-05-04 20:54:51 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116404832

版权

Web前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现垂直手风琴效果。

实现过程

1.步骤

垂直手风琴效果实现步骤:
	  1、一个区域内设置三个小区域，小区域内设置一个a标签、向下箭头和p标签内容，实现点击a标签显示内容
	  2、a标签设置锚点链接，链接到小区域，使用target选择器对被使用的目标元素设置样式
	  3、a标签设置渐变效果（被悬停时和被锚点链接使用时）；p标签内容设置超出隐藏滚动条效果和初始隐藏点击打开效果；三角箭头使用边框制作，点击时设置可见方向

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.listBox{
				width: 1000px;
				margin: 200px auto;
			}
			.listBox .list a{
				/* 行内元素转换为块元素 */
				display: block;
				height: 80px;
				/* 设置垂直渐变 */
				background: linear-gradient(#cecece,#8f8f8f);
				border-radius: 10px;
				text-decoration: none;
				padding-left: 12px;
				line-height: 80px;
				color: #424242;
			}
			 .listBox .list p{
				 /* 先隐藏内容 */
				 height: 0px;
				 /* 超出内容设置滚动条 */
				 overflow: auto;
				 padding-left: 10px;
				 margin: 5px 0;
				 /* 内容打开时过度动画 */
				 transition: 1s;
			 }
			 .listBox .list{position: relative;}
			 .listBox .list span{
				 width: 0px;
				 height: 0px;
				 position: absolute;
				 top: 27px;
				 right: 20px;
				 /* 使用边框来设置三角形，默认朝下 */
				 border-top: 15px #FFFFFF solid;
				 border-right: 15px transparent solid;
				 border-left: 15px transparent solid;
				 border-bottom: 15px transparent solid;
			 }
			 /* target选择器作用于锚点链接对应的当前活动目标元素样式 */
			 .listBox .list:target p{
				 height: 200px;
			 }
			 /* a标签在鼠标悬停或被选中为目标元素设置渐变背景 */
			 .listBox .list a:hover,.listBox .list:target a{
				 background: linear-gradient(#6bb2ff,#2288dd);
				 color: #FFFFFF;
			 } 
			 .listBox .list:target span{
				 /* 选中的目标元素设置向左的箭头三角 */
				 border-top: 15px transparent solid;
				 border-left: 15px #FFFFFF solid;
				 right: 10px;
			 }
		</style>
	</head>
	
	<body>  
	<div class="listBox">
		<div class="list" id="list1">
			<!-- 设置锚点链接 -->
			<a href="#list1">CSDN</a>
			<span></span>
			<p>
			中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。
			</p>
		</div>
		<div class="list" id="list2">
			<a href="#list2">简书</a>
			<span></span>
			<p>
			简书是一个创作社区，任何用户均可以在其上进行创作。用户在简书上面可以方便的创作自己的写作作品，互相交流。简书成为国内优质原创内容输出平台。
2019年1月，上海市网信办对运营“简书网”的上海佰集信息科技有限公司作出罚款的处罚决定。
			</p>
		</div>
		<div class="list" id="list3">
			<a href="#list3">微博</a>
			<span></span>
			<p>
			微博是指一种基于用户关系信息分享、传播以及获取的通过关注机制分享简短实时信息的广播式的社交媒体、网络平台。
允许用户通过Web、Wap、Mail、App、IM、SMS以及用户可以通过PC、手机等多种移动终端接入，以文字、图片、视频等多媒体形式，实现信息的即时分享、传播互动。
2009年8月新浪推出“新浪微博”内测版，成为门户网站中第一家提供微博服务的网站。此外微博还包括腾讯微博，网易微博等。但如若没有特别说明，微博就是指新浪微博。
2014年3月27日晚间，在中国微博领域一枝独秀的新浪微博宣布改名为“微博”，并推出了新的LOGO标识，新浪色彩逐步淡化。
2018年8月8日，微博获金运奖年度最佳效果运营奖。
			</p>
		</div>
	</div>
	</body>
</html>

3.效果

在这里插入图片描述

一醉南柯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局案例 7-51 垂直手风琴效果

文章目录前言实现过程1.步骤2.代码3.效果前言使用css3实现垂直手风琴效果。实现过程1.步骤垂直手风琴效果实现步骤: 1、一个区域内设置三个小区域，小区域内设置一个a标签、向下箭头和p标签内容，实现点击a标签显示内容 2、a标签设置锚点链接，链接到小区域，使用target选择器对被使用的目标元素设置样式 3、a标签设置渐变效果（被悬停时和被锚点链接使用时）；p标签内容设置超出隐藏滚动条效果和初始隐藏点击打开效果；三角箭头使用边框制作，点击时设置可见方向2.代码&lt
复制链接

扫一扫