3D下拉菜单--简易版

最新推荐文章于 2022-05-18 21:09:08 发布
最新推荐文章于 2022-05-18 21:09:08 发布
阅读量382 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42161401/article/details/83178325
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
			}
			@-webkit-keyframes open{
				0%{
					-webkit-transform: rotateX(-120deg);
				}
				25%{
					-webkit-transform: rotateX(30deg);
				}
				50%{
					-webkit-transform: rotateX(-15deg);
				}
				75%{
					-webkit-transform: rotateX(8deg);
				}
				100%{
					-webkit-transform: rotateX(0deg);
				}
			}
			
			@-webkit-keyframes close{
				0%{
					-webkit-transform: rotateX(0deg);
				}
				
				100%{
					-webkit-transform: rotateX(-120deg);
				}
			}
			
			#wrap{
				width: 160px;
				margin: 30px auto;
				position: relative;
				-webkit-perspective: 800px;
				
			}
			#wrap h2{
				height: 40px;
				background: red;
				color: #fff;
				text-align: center;
				position: relative;
				z-index: 10;
			}
			#wrap div{
				position: absolute;
				top: 32px;
				width: 100%;
				left: 0;
				-webkit-transform-style: preserve-3d;
				-webkit-transform-origin:top;
				-webkit-transform: rotateX(-120deg);
				z-index: 1;
			}
			#wrap span{
				display: block;
				height: 30px;
				background: greenyellow;
				color: #fff;
				box-shadow:inset 0 0 0 20px rgba(0,0,0,1);
				transition: 1s;
			}
			#wrap>div{
				top: 40px;
			}
			
			#wrap .show{
				-webkit-animation: 1.2s open;
				-webkit-transform: rotateX(0deg);
			}
			#wrap .hide{
				-webkit-animation: 0.8s close;
				-webkit-transform: rotateX(-120deg);
			}
			#wrap .show>span{
				box-shadow:inset 0 0 0 20px rgba(0,0,0,0);
			}
		</style>
	</head>
	<body>
		<button id="btn">按钮</button>
		 <div id="wrap">
			<h2>我是标题</h2>
			 <div>
				 <span>选项1</span>
				 <div>
					 <span>
						 选项2
					 </span>
					 <div>
						 <span>
							 选项3
						 </span>
						 <div>
							 <span>
								 选项4
							 </span>
							 <div>
								 <span>选项5</span>
								 <div>
									 <span>选项6</span>
									 <div>
										 <span>选项7</span>
									 </div>
								 </div>
							 </div>
						 </div>
					 </div>
				 </div>
			 </div>
		 </div>
		 <script>
			 var oBtn = document.getElementById("btn")
			 var oWrap = document.getElementById("wrap")
			 var aDiv = oWrap.getElementsByTagName("div")
			 var delay = 200
			 var oTimer = null
			 var onOff = true
			 var i = 0
			 oBtn.onclick = function(){
				if(oTimer){
					return
				}
				if(onOff){
					i = 0
					oTimer = setInterval(function(){
						aDiv[i].className = "show"
						i++
						if(i==aDiv.length){
							clearInterval(oTimer)
							oTimer = null
							onOff = false
						}
					},delay)
				}else {
					i = aDiv.length-1
					oTimer = setInterval(function(){
						aDiv[i].className = "hide"
						i--
						if(i<0){
							clearInterval(oTimer)
							oTimer = null
							onOff = true
						}
					},delay)
				}
			 }
		 </script>
	</body>
</html>

 

海忆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常漂亮的3D下拉菜单.rar
07-04
非常漂亮的3D下拉菜单
超炫3D下拉菜单Makisu
12-03
插件描述：超炫3D下拉菜单Makisu. 参考示例：http://www.jq22.com/jquery-info4948
一款非常棒的CSS 3D下拉式菜单实现-Makisu
weixin_30246221的博客
10-29 138
日期：2012-10-26来源：GBin1.com 说到折叠效果，曾经我们介绍过一款oriDomi折纸效果的javascript类库，它是一款JavaScript类库，可以把页面中任何HTML元素生成折叠效果。在今天我们介绍的文章中，使用CSS3D菜单作为一个jQuery插件，它可以自动转换成任何一款列表中的元素。在今天的文章中，我们介绍一款非常棒的3D效果下拉式菜单-Makisu，它独有的...
最全面3D建模菜单，各种流程细分讲解
李旭的博客
05-16 2368
在当下3D技术发展的高速时期，3D建模表现出了极强的生命力，3Dmax、Maya、ZB这些都是3D建模的常用软件。说到这里就要给大家普及一下三维模型，什么是三维模型？三维模型是物体的多边形表示，通常用计算机或者其它视频设备进行显示。显示的物体可以是现实世界的实体，也可以是虚构的物体。游戏3D则是通过大型的3D游戏引擎制作游戏世界和各种物件的3D模型，并有计算机处理后得到真实感较强的3D图像。现在越来越多的人瞄准游戏3D行业。今天带来整理后的教程资料，从入门到项目经验传授，总有一个你感兴趣的发展方向来学习。
实现3D旋转下拉菜单
u014041540的博客
04-20 542
*{ margin: 0; padding: 0; text-decoration:none; } #containter{ margin: 20px; height: 100%; width: 100%; text-align: center; } .menu{ height: 30px; }
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
在本文中，我们将探讨如何使用jQuery和CSS技术创建一个炫丽的横向二级下拉菜单，同时提供源码供下载。这个菜单设计适用于网站导航，它不仅具有良好的视觉效果，还能帮助用户更方便地访问二级子菜单中的内容。 首先...
下拉菜单-JQUERY
09-27
本文将深入探讨如何利用jQuery来创建功能丰富的下拉菜单。 一、jQuery简介 jQuery是由John Resig在2006年创建的一个开源项目，它的核心理念是"Write Less, Do More"，即用更少的代码实现更多的功能。jQuery通过封装...
swift-iOSSwift下拉菜单列表
08-15
本文将深入探讨如何使用Swift实现一个下拉菜单列表，这在很多应用场景中都非常常见，如选择日期、时间或者选项列表等。标题中的"swift-iOSSwift下拉菜单列表"就是一个典型的例子。 首先，我们要理解什么是下拉菜单...
swift-FCPopMenu友好简易可高度定制的下拉菜单
08-15
FCPopMenu就是一款专为Swift设计的友好、简易且高度可定制的下拉菜单控件。它允许开发者轻松地在应用中实现功能丰富的下拉菜单，以提高用户体验和界面美观度。 FCPopMenu的核心特性在于其灵活性和可定制性。通过这...
3D菜单（3）
weixin_30242907的博客
10-30 77
接着上次的写的： include "Math2.as"; var menu:Sprite=new Sprite(); menu.x=275; menu.y=180; menu.addEventListener(Event.ENTER_FRAME,moveMenu); this.addChild(menu); var disx:Number=200; var disy:N...
3D菜单特效(CSS3)
08-16
3D菜单特效(CSS3)
3D餐厅菜单概念
07-14
3D餐厅菜单概念
3D菜单选择功能
09-23
3D菜单旋转3D菜单旋转3D菜单旋转3D菜单旋转3D菜单旋转
3D菜单(2)
weixin_30536513的博客
10-29 65
让图标旋转（1）； 写一个Math2.as；并保存和fla文件同一目录下： 代码如下： function angleToRadian(angle:Number):Number { return angle*(Math.PI/180); } function radianToAngle(radian:Number):Number { return radian*(180/...
NGUI 3D菜单
爱不释手lc
09-24 757
这个是按照Ngui的官方Demo，自己重新做了一次后的总结。 新建场景。点击Ngui--->Create--->3DUI。 。 1、在UI ROOT(3D)下面创建一个Empty GameObject，命名为MainMenu，用来盛放MainMenu的元素。再创建一个Empty GameObject命名为OptionMenu，用来盛放OptionMenu的元素。 2、向Main
好玩的3D折叠效果的菜单
reg183的专栏
05-18 191
源码如下： <!doctype html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <meta name="keywords" content="JS代码,{k.
CSS3 animation--仿写炫酷的下拉菜单
qq_21058391的博客
09-12 1801
1.原文地址：15款手机端打开菜单动画过渡特效DEMO15 2.下面我们就仿着他的源码自己尝试写一下。不得不说由于是在移动端，这样的效果 确实是狂酷耍帅吊炸天的漂亮！
炫酷3D感菜单
m0_58662929的博客
04-29 1163
先贴个图,效果可浏览dom 在B站看到一个纯css的菜单效果,看着不错啊 给个三连不谢,执行一贯风格,被我看到了那不就是我的了 [H5小案例] 纯CSS实现炫酷3D电竞菜单_哔哩哔哩_bilibili 草率了,代码不全! 为什么B站投的币不能收回... 正文开始 B站上所写是原生搞得,敲下来代码太多了还有一些css看不到,我这个人比较懒,那就用vue去搞一下 挂载元素 <div class="menu_css_wrap"> <starry cl...
Uity3D简单的下拉菜单
做GIS梦的人
11-17 3324
Unity3D里自己定义了一个下拉菜单，利用Dropdown+Button做，把button覆盖在Dropdown上就可以了，点击按钮，Dropdown弹出下拉列表 仅仅使用Dropdown，菜单上的文字是会改变的 部分代码如下 using UnityEngine; using System.Collections; public class Panel1 : MonoBehaviour

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值