首页 > 其他分享> 文章详细

【H5/CSS3】旋转展开收缩菜单栏

2022-09-11 09:31:08 阅读：260 来源： 互联网

标签：CSS3 rotate menu transform H5 item toggler 菜单栏 255

地址链接

视频链接：
https://www.bilibili.com/video/BV1TK4y1Q78s

github链接：
https://github.com/Lavender-z/demo

如果上不了，就下个dev-sidecar代理

效果

代码注释

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
		/>

		<title>Document</title>
	</head>
	<style>
		body {
			overflow: hidden;
			background: linear-gradient(to right, #ffb95e, #f35c70);
		}

		/* 这个仅仅只是固定位置的 */
		.menu-toggler {
			position: absolute;
			display: block;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 40px;
			height: 40px;
			z-index: 2;
			opacity: 0;
			cursor: pointer;
		}

		/* 鼠标靠近菜单按钮，长条就会亮成白色 */
		.menu-toggler:hover + label,
		.menu-toggler:hover + label:before,
		.menu-toggler:hover + label:after {
			background: white;
		}
		/* label确认点击后，把中间的横杆隐藏掉，也就是X */
		.menu-toggler:checked + label {
			background: transparent;
		}
		/* 那两条横杠的可以保证交叉组成X后，不会出现错位的现象 */
		.menu-toggler:checked + label:before,
		.menu-toggler:checked + label:after {
			top: 0;
			width: 40px;
			transform-origin: 50% 50%;
		}

		/* 那两条横杠在点击后就旋转到对应的角度，然后组成X */
		.menu-toggler:checked + label:before {
			transform: rotate(45deg);
		}

		.menu-toggler:checked + label:after {
			transform: rotate(-45deg);
		}

		/* 点击后就表示不隐藏菜单列表 */
		.menu-toggler:checked ~ ul .menu-item {
			opacity: 1;
		}

		/* transform先写旋转位置的角度，再写元素离中心点的位置，那么就能形成一个圆圈的摆放 */
		.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
			transform: rotate(0deg) translateX(-110px);
		}

		.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
			transform: rotate(60deg) translateX(-110px);
		}

		.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
			transform: rotate(120deg) translateX(-110px);
		}

		.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
			transform: rotate(180deg) translateX(-110px);
		}

		.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
			transform: rotate(240deg) translateX(-110px);
		}

		.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
			transform: rotate(300deg) translateX(-110px);
		}

		/* 由于每个菜单选项都是要hover后才产生效果，那么在菜单没展示开的时候根本不用显示效果 */
		.menu-toggler:checked ~ ul .menu-item a {
			pointer-events: auto;
		}

		/* 画白色横杆的位置 */
		.menu-toggler + label {
			width: 40px;
			height: 5px;
			display: block;
			z-index: 1;
			border-radius: 2.5px;
			background: rgba(255, 255, 255, 0.7);
			transition: transform 0.5s, top 0.5s;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
		}

		.menu-toggler + label:before,
		.menu-toggler + label:after {
			width: 40px;
			height: 5px;
			display: block;
			z-index: 1;
			border-radius: 2.5px;
			background: rgba(255, 255, 255, 0.7);
			transition: transform 0.5s, top 0.5s;
			content: '';
			position: absolute;
			left: 0;
		}

		.menu-toggler + label:before {
			top: 10px;
		}

		.menu-toggler + label:after {
			top: -10px;
		}

		/* 因为每个图标在菜单展开时都要实现旋转的效果，但是旋转后的图标会很不能摆正，所以要调回来 */
		.menu-item:nth-child(1) a {
			transform: rotate(0deg);
		}

		.menu-item:nth-child(2) a {
			transform: rotate(-60deg);
		}

		.menu-item:nth-child(3) a {
			transform: rotate(-120deg);
		}

		.menu-item:nth-child(4) a {
			transform: rotate(-180deg);
		}

		.menu-item:nth-child(5) a {
			transform: rotate(-240deg);
		}

		.menu-item:nth-child(6) a {
			transform: rotate(-300deg);
		}

		.menu-item a {
			/* 由于原来的每个图标都很小，所以需要拉宽和拉长 */
			display: block;
			width: inherit;
			height: inherit;
			line-height: 80px;
			color: rgba(255, 255, 255, 0.7);
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			text-align: center;
			text-decoration: none;
			font-size: 40px;
			pointer-events: none;
			transition: 0.2s;
		}

		.menu-item {
			position: absolute;
			display: block;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 80px;
			height: 80px;
			/* 因为所有菜单选项都会回到中心，那么就需要隐藏掉他们的内容 */
			opacity: 0;
			transition: 0.5s;
		}

		/* hover到图标显示放大的效果 */
		.menu-item a:hover {
			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
			color: white;
			background: rgba(255, 255, 255, 0.3);
			font-size: 44.44px;
		}
	</style>
	<body>
		<!-- 菜单部分 -->
		<nav class="menu">
			<input
				checked="checked"
				class="menu-toggler"
				id="menu-toggler"
				type="checkbox"
			/>
			<label for="menu-toggler"></label>
			<ul>
				<li class="menu-item">
					<a class="fa fa-facebook" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-youtube" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-wordpress" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-qq" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-weixin" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-github" href="javascript:void(0)"></a>
				</li>
			</ul>
		</nav>
	</body>
</html>

标签：CSS3,rotate,menu,transform,H5,item,toggler,菜单栏,255
来源： https://www.cnblogs.com/PaturNax/p/16683521.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【H5/CSS3】旋转展开收缩菜单栏

地址链接

效果

代码注释