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

  • 【H5/CSS3】旋转展开收缩菜单栏已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

视频链接:
https://www.bilibili.com/video/BV1TK4y1Q78sgithub链接:
https://github.com/Lavender-z/demo


1 别人写的

地址链接

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

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

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

效果

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

代码注释

<!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>  

2 我这个菜鸡写的案例——上述案例plus版

效果

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

代码

<!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" /> 		<title>Document</title> 	</head> 	<style> 		/* 基本配置 */ 		* { 			padding: 0px; 			margin: 0px; 		} 		body { 			display: flex; 			align-items: center; 			align-content: center; 			justify-content: space-around; 			background-color: #eceff1; 		} 		.container { 			margin-top: 70px; 			width: 500px; 			height: 500px; 			position: relative; 		} 		/* 设置基本样式 */ 		.circle { 			width: 70px; 			height: 70px; 			background-color: #f9403d; 			border-radius: 50%;  			display: flex; 			text-align: center; 			justify-content: center; 			align-content: center; 			align-items: center; 			position: absolute; 			bottom: 10px; 			left: 10px; 		}  		.circle img { 			width: 75%; 		}  		.items li { 			width: 70px; 			height: 70px; 			background-color: #f9403d; 			border-radius: 50%; 			display: flex; 			text-align: center; 			position: absolute; 			bottom: 10px; 			left: 10px; 			z-index: -1; 			display: block; 			transition: 1s; 		}  		li img { 			width: 75%; 			margin-top: 8px; 		}  		/* 这是通过过渡实现的效果 */ 		#menu:not(:checked) ~ .items li:nth-child(1) { 			transform: rotate(0deg) translateY(-110px); 		} 		#menu:not(:checked) ~ .items li:nth-child(2) { 			transform: rotate(60deg) translateY(-110px); 		} 		#menu:not(:checked) ~ .items li:nth-child(3) { 			transform: rotate(120deg) translateY(-110px); 		} 		#menu:not(:checked) ~ .items li:nth-child(4) { 			transform: rotate(180deg) translateY(-110px); 		} 		#menu:not(:checked) ~ .items li:nth-child(5) { 			transform: rotate(240deg) translateY(-110px); 		} 		#menu:not(:checked) ~ .items li:nth-child(6) { 			transform: rotate(300deg) translateY(-110px); 		}  		.items li:nth-child(1) img { 			transform: rotate(-90deg); 		} 		.items li:nth-child(2) img { 			transform: rotate(-150deg); 		} 		.items li:nth-child(3) img { 			transform: rotate(-210deg); 		} 		.items li:nth-child(4) img { 			transform: rotate(-270deg); 		} 		.items li:nth-child(5) img { 			transform: rotate(-330deg); 		} 		.items li:nth-child(6) img { 			transform: rotate(-390deg); 		}  		#menu:not(:checked) ~ label .circle { 			animation-name: disappear; 			animation-duration: 180.5ms; 			animation-iteration-count: 1; 			animation-fill-mode: forwards; 		}  		@keyframes disappear { 			0% { 				transform: scale(1); 			} 			50% { 				transform: scale(1.2); 			} 			100% { 				transform: scale(0.85) rotate(-45deg); 			} 		}  		#menu:checked ~ label .circle { 			animation-name: appear; 			animation-duration: 0.5ms; 			animation-iteration-count: 1; 			animation-fill-mode: forwards; 		}  		#menu:checked ~ label .circle:hover { 			width: 80px; 			height: 80px; 			bottom: 5px; 			left: 5px; 		}  		@keyframes appear { 			0% { 				transform: scale(0.85) rotate(45deg); 			} 			50% { 				transform: scale(1.2); 			} 			100% { 				transform: scale(1); 			} 		} 	</style> 	<body> 		<div class="container"> 			<input type="checkbox" id="menu" checked="checked" /> 			<label for="menu"> 				<div class="circle"> 					<img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /> 				</div> 			</label> 			<ul class="items"> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 				<li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> 			</ul> 		</div> 	</body> </html>