草庐IT

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

PaturNax 2023-03-28 原文

1 别人写的

地址链接

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

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

效果

代码

<!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="" />
				</div>
			</label>
			<ul class="items">
				<li><img src="./img/plus.png" alt="" /></li>
				<li><img src="./img/plus.png" alt="" /></li>
				<li><img src="./img/plus.png" alt="" /></li>
				<li><img src="./img/plus.png" alt="" /></li>
				<li><img src="./img/plus.png" alt="" /></li>
				<li><img src="./img/plus.png" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
CSS3CSSmenutransformmenu-togglerHtml/Css

有关【H5/CSS3】旋转展开收缩菜单栏的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. 旋转矩阵的几何意义 - 2

    点向量坐标矩阵的几何意义介绍旋转矩阵的几何含义之前，先介绍一下点向量坐标矩阵的几何含义点：在一维空间下就是一个标量，如同一条直线上，以任意某一个位置为0点，以一定的尺度间隔为1，2，3...,相反方向为-1，-2，-3...；如此就形成了一维坐标系，这时候任何一个点都可以用一个数值表示，如点p1=5，即即从原点出发沿着x轴正方向移动5个尺度；点p2=-3，负方向移动3个尺度；     在一维坐标系上过原点做垂直于一维坐标系的直线，则形成了二维坐标系，此时描述一个点需要两个数值来表示点p3=（3，2），即从原点出发沿着x轴正方向移动3个尺度，在此基础上沿着y轴正方向移动两个尺度的位置就是点p3。

  4. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  8. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  9. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  10. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

随机推荐