CSS3实现扇形动画菜单流程详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3实现扇形动画菜单流程详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4851字，纯文字阅读大概需要7分钟。

内容图文

这次给大家带来CSS3实现扇形动画菜单流程详解，CSS3实现扇形动画菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

原文章请点击这里

简化版完整实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3扇形动画菜单</title>
		<style>
			*{padding: 0; margin: 0;}
			body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
			.menuHolder {width:100px; height:100px; margin:0 0 250px 0; position:relative;z-index:100;}
			.menuHolder ul {padding:0px; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}
			/*.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}*/
			.menuHolder ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; 
									box-shadow:-5px 5px 5px rgba(0,0,0,0.4);transform-origin:0 0;}
			.menuHolder ul.p1 li {position:absolute; left:0; top:0;}
			.menuHolder ul.p2 {z-index:-1;}
			.menuHolder ul.p3 {z-index:-1;}
			/*画第一个圆圈*/
			.menuHolder li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;}
			/*画第二个圆圈*/
			.menuHolder li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;}
			/*画第三个圆圈*/
			.menuHolder ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;}
			/*把第二第三个圆隐藏到角落里去，让视角看不到*/
			.menuHolder ul ul {transform-origin:0 0;transform:rotate(90deg);transition:1s;}
			/*绘制第二层的菜单*/
			.menuHolder li.s2:nth-of-type(6) > a {background:#888;
			transform:rotate(75deg);
			}
			.menuHolder li.s2:nth-of-type(5) > a {background:#999;
			transform:rotate(60deg);
			}
			.menuHolder li.s2:nth-of-type(4) > a {background:#aaa;
			transform:rotate(45deg);
			}
			.menuHolder li.s2:nth-of-type(3) > a {background:#bbb;
			transform:rotate(30deg);
			}
			.menuHolder li.s2:nth-of-type(2) > a {background:#ccc;
			transform:rotate(15deg);
			}
			/*绘制联系的子菜单*/
			.menuHolder .a6 li:nth-of-type(6) > a {background:#444;
			transform:rotate(75deg);
			}
			.menuHolder .a6 li:nth-of-type(5) > a {background:#555;
			transform:rotate(60deg);
			}
			.menuHolder .a6 li:nth-of-type(4) > a {background:#666;
			transform:rotate(45deg);
			}
			.menuHolder .a6 li:nth-of-type(3) > a {background:#777;
			transform:rotate(30deg);
			}
			.menuHolder .a6 li:nth-of-type(2) > a {background:#888;
			transform:rotate(15deg);
			}
			/*绘制销量的子菜单*/
			.menuHolder .a5 li:nth-of-type(5) > a {background:#555;
			transform:rotate(72deg);
			}
			.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
			transform:rotate(54deg);
			}
			.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
			transform:rotate(36deg);
			}
			.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
			transform:rotate(18deg);
			}
			/*绘制服务、商店、联系我们的子菜单*/
			.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
			transform:rotate(60deg);
			}
			.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
			transform:rotate(30deg);
			}
			/*鼠标滑过第一层菜单展开第二层菜单*/
			.menuHolder li.s1:hover ul.p2 {
			transform:rotate(0deg);
			}
			/*鼠标滑过第二层菜单展开第三层菜单*/
			.menuHolder li.s2:hover ul.p3 {
			transform:rotate(0deg);
			}
			/*鼠标滑过改变背景颜色和文字颜色*/
			.menuHolder ul li:hover > a {background:#f00; color:#fff;}
			.menuHolder li.s2:hover > a {background:#d00; color:#fff;}
			.menuHolder .a6 li:hover > a {background:#b00; color:#fff;}
			.menuHolder .a5 li:hover > a {background:#b00; color:#fff;}
			.menuHolder .a3 li:hover > a {background:#b00; color:#fff;}
		</style>
	</head>
	<body>
		<p class="menuHolder">
			<p class="menuWindow">
				<ul class="p1">
					<li class="s1"><a href="#url">导航菜单</a>
						<ul class="p2">
							<li class="s2"><a href="#"><span>首页</span></a></li>
							<li class="s2"><a href="#url"><span>服务</span></a>
								<ul class="p3 a3">
									<li><a href="#">打印</a></li>
									<li><a href="#">编辑</a></li>
									<li><a href="#">保管</a></li>
								</ul>
							</li>
							<li class="s2"><a href="#url"><span>联系</span></a>
								<ul class="p3 a6">
									<li><a href="#">支持</a></li>
									<li><a href="#">销售</a></li>
									<li><a href="#">购买</a></li>
									<li><a href="#">摄影师</a></li>
									<li><a href="#">零售商</a></li>
									<li><a href="#">常规</a></li>
								</ul>
							</li>
							<li class="s2"><a href="#url"><span>商店</span></a>
								<ul class="p3 a3">
									<li><a href="#">南区</a></li>
									<li><a href="#">北区</a></li>
									<li><a href="#">中心区</a></li>
								</ul>
							</li>
							<li class="s2"><a href="#url"><span>联系我们</span></a>
								<ul class="p3 a3">
									<li><a href="#">邮箱</a></li>
									<li><a href="#">邮递</a></li>
									<li><a href="#">电话</a></li>
								</ul>
							</li>
							<li class="s2 b6"><a href="#url"><span>销量</span></a>
								<ul class="p3 a5">
									<li><a href="#">数码单反机身</a></li>
									<li><a href="#">镜头</a></li>
									<li><a href="#">闪光枪</a></li>
									<li><a href="#">三角架</a></li>
									<li><a href="#">过滤器</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</p>
		</p>
	</body>
</html>

效果图如下：

CSS3实现扇形动画菜单流程详解 - 文章图片

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3实现扇形动画菜单流程详解全部内容，希望文章能够帮你解决CSS3实现扇形动画菜单流程详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412292.html

来源：【匿名】

【上一篇】CSS3的blur白边怎么去除【下一篇】如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

更多 ►

【CSS3实现扇形动画菜单流程详解】教程文章相关的互联网学习教程文章

今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、过渡(transition)和动画(animation)等CSS3技术。首先我们先来了解一下变形(transform),transform就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们来看一看它们是如何使用，先从我们的transform语法开始：　<!--它其中的值为：旋转rotate、扭曲skew、缩放scale和移动...

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个...

CSS3盒子模型详解【图】

本章将介绍CSS3中各种盒的知识点；主要包含以下内容：CSS3中各种各样盒的类型概念、浏览器支持情况；当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示；掌握给盒添加阴影的属性；掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型 inline-blockcss中我们使用display来定...

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...

[转]CSS3盒模型display:box详解【代码】

时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...

CSS3 Filter详解（改变模糊度亮度透明度等方法）【代码】【图】

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数saturate 饱和度　　　　值为numhue-rotate 色相旋转　　值为angl...

CSS3动画效果回调处理详解

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...

CSS3内容溢出详解

CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子，这个盒子就是一个容器。容器就有大小之分，如果在样式中指定盒子的宽度与高度，可能某些内容在盒子中就会容不下，此时就可以使用overflow 属性来指定如何显示盒中容纳不下的内容。overflow 属性是CSS2.1规范中的特性，而在CSS3中增加了overflow-x和overflow-y 属性。overflow-x主要是用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切...

css3 object-fit详解【图】

上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover...

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素即：html2. E:nth-child(n)（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素但不是P类型，不是红色</h1> < p>这是黑色的注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...

CSS3详解：background

CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。1、多个背景图片在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image....

css3中背景尺寸background-size详解

定义：规定背景图像的尺寸background-size的类型background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+JavaScript语法：object.style.backgroundSize="60px 80px"语法：background-...

css3中UI元素状态伪类选择器实例详解

这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...

如何使用css3实现字体内发光效果（详解）【图】

在互联网日益发展的当今社会，人们对于网页用户体验的要求越来越苛刻，这就催生了更多的特殊效果的衍生，比如阴影效果，发光效果等，那么本文将向大家介绍一下如何使用css3实现字体发光的特殊效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。使用css3实现字体发光效果原理首先我们要输入需要加入特效的文本。然后我们需要了解的是css3中本身没有发光特效的属性，但是我们可以通过text-shadow属性实现发光效果...

利用CSS3伪元素实现逐渐发光的方格边框实现详解【图】

这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...

CSS3 - 技术教程分类

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 弹性盒子 CSS3 多媒体查询 css3 全部

CSS3 - 最热教程

jQuery+HTML5+CSS3制作支持响应式布局时...如何使用css3实现3D的翻牌效果（附完整...css3如何实现进度条？css3中进度条的实...有关对CSS3媒体查询知识的总结 CSS3输入框阴影效果及其他阴影效果_htm...20种炫酷CSS3按钮鼠标滑过特效_html/cs...Css3制作变形与动画效果_表单特效 css3新特性有哪些关于CSS3的一些冷门属性_html/css_WEB-...css3中animation动画属性如何使用

首页 / CSS3 / CSS3实现扇形动画菜单流程详解

CSS3实现扇形动画菜单流程详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【CSS3实现扇形动画菜单流程详解】教程文章相关的互联网学习教程文章

CSS3 动画及过渡详解【代码】【图】

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

CSS3盒子模型详解【图】

CSS3中的弹性流体盒模型技术详解(一)

[转]CSS3盒模型display:box详解【代码】

CSS3 Filter详解（改变模糊度亮度透明度等方法）【代码】【图】

CSS3动画效果回调处理详解

CSS3内容溢出详解

css3 object-fit详解【图】

CSS3 结构伪类选择器详解

CSS3详解：background

css3中背景尺寸background-size详解

css3中UI元素状态伪类选择器实例详解

如何使用css3实现字体内发光效果（详解）【图】

利用CSS3伪元素实现逐渐发光的方格边框实现详解【图】

CSS3 - 相关标签

CSS3 - 技术教程分类

CSS3 - 最新教程

CSS3 - 最热教程