其他分享
首页 > 其他分享> > 【H5/CSS3】旋转展开收缩菜单栏

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

作者:互联网

地址链接

视频链接:
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