css伪类三角形点击动画切换

最新推荐文章于 2022-08-29 11:27:47 发布

jiongsin

最新推荐文章于 2022-08-29 11:27:47 发布

阅读量390

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/jiongsin/article/details/105059439

版权

本文介绍如何利用CSS3实现一个有趣的三角形点击动画切换效果。通过结合伪类选择器和变换属性，创建出动态变化的三角形，为用户交互增加视觉吸引力。

摘要由CSDN通过智能技术生成

*{
	margin: 0;
	padding: 0;
}
ul,li{
	list-style: none;
}
.header{
	margin: 10px 0;
	padding: 10px 0;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	ul{
		display: flex;
		justify-content: space-around;
		li{
			font-size:13px;
		}
	}
	li::after{
		content: '';
		display: inline-block;
		width: 4px;
		height: 4px;
		border-left: solid 1px #797979;
		border-top: solid 1px #797979;
		transform: rotate(-135deg);
		transform-origin: 2px 1px;
		margin-left: 5px;
		// position: relative;
		// top: -3px;
		// left: 4px;
		transition: all 0.3s;
	}
	li.active::after{
		transform: rotate(45deg);
		// top: 0;
	}
}

<div class="header">
	<ul>
		<li class="active">经验</li>
		<li>学历</li>
		<li>薪资</li>
		<li>学历</li>
		<li>薪资</li>
	</ul>
</div>

<script type="text/javascript">
	document.querySelector('.header&#