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


前言

使用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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值