纯CSS3打造动感漂亮的扇形菜单

最新推荐文章于 2024-05-23 13:03:42 发布
最新推荐文章于 2024-05-23 13:03:42 发布
阅读量2.8k 收藏 4
点赞数
分类专栏： css 文章标签： css menu radius javascript 
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>纯CSS3打造动感漂亮的扇形菜单_网页代码站)</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.menuHolder {width:100px; height:100px; margin:0px 0 250px 0px; position:relative;z-index:100;}
.menuHolder ul {padding:0; 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);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
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 {
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotateZ(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.menuHolder li.s2:nth-of-type(6) > a {background:#888;
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5) > a {background:#999;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4) > a {background:#aaa;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3) > a {background:#bbb;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2) > a {background:#ccc;
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a6 li:nth-of-type(6) > a {background:#444;
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a5 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(72deg);
-moz-transform:rotateZ(72deg);
-ms-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(54deg);
-moz-transform:rotateZ(54deg);
-ms-transform:rotate(54deg);
-o-transform:rotate(54deg);
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(36deg);
-moz-transform:rotateZ(36deg);
-ms-transform:rotate(36deg);
-o-transform:rotate(36deg);
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(18deg);
-moz-transform:rotateZ(18deg);
-ms-transform:rotate(18deg);
-o-transform:rotate(18deg);
transform:rotate(18deg);
}

.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

.menuHolder li.s1:hover ul.p2 {
-webkit-transform:rotate(0deg);
-moz-transform:rotateZ(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
.menuHolder li.s2:hover ul.p3 {
-webkit-transform:rotate(0deg);
-moz-transform:rotateZ(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
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;}



.menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100;
-webkit-transition:0s 1s;
-moz-transition:0s 1s;
-ms-transition:0s 1s;
-o-transition:0s 1s;
transition:0s 1s;
}
.menuHolder:hover .menuWindow {width:310px; height:310px;
-webkit-transition:0s 0s;
-moz-transition:0s 0s;
-ms-transition:0s 0s;
-o-transition:0s 0s;
transition:0s 0s;
}
.menuHolder span {display:block; 
-webkit-transform:rotate(5deg);
-moz-transform:rotateZ(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
.menuHolder ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;}
.menuHolder:hover ~ img.close {width:100%; height:100%;}

</style>
</head>
<body>
<div class="menuHolder">
	<div class="menuWindow">
		<ul class="p1">
			<li class="s1"><a href="#url">Menu</a>
				<ul class="p2">
					<li class="s2"><a href="http://www.webdm.cn/"><span>Home</span></a></li>
					<li class="s2"><a href="#url"><span>Services</span></a>
						<ul class="p3 a3">
							<li><a href="#">Printing</a></li>
							<li><a href="#">Editing</a></li>
							<li><a href="#">Storage</a></li>
						</ul>
					</li>
					<li class="s2"><a href="#url"><span>Contacts</span></a>
						<ul class="p3 a6">
							<li><a href="#">Support</a></li>
							<li><a href="#">Sales</a></li>
							<li><a href="#">Buying</a></li>
							<li><a href="#">Photographers</a></li>
							<li><a href="#">Stockist</a></li>
							<li><a href="#">General</a></li>
						</ul>
					</li>
					<li class="s2"><a href="#url"><span>Stores</span></a>
						<ul class="p3 a3">
							<li><a href="#">South Region</a></li>
							<li><a href="#">North Region</a></li>
							<li><a href="#">Central Region</a></li>
						</ul>
					</li>
					<li class="s2"><a href="#url"><span>Contact Us</span></a>
						<ul class="p3 a3">
							<li><a href="#">Email</a></li>
							<li><a href="#">Post</a></li>
							<li><a href="#">Telephone</a></li>
						</ul>
					</li>
					<li class="s2 b6"><a href="#url"><span>Sales</span></a>
						<ul class="p3 a5">
							<li><a href="#">DSLR Cameras</a></li>
							<li><a href="#">Lenses</a></li>
							<li><a href="#">Flash Guns</a></li>
							<li><a href="#">Tripods</a></li>
							<li><a href="#">Filters</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<br />

</body>
</html>

ww122081351
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
发果叁
10-20 3635
在前面的两节 【CSS 进阶向】 中，我们通过纯粹的 CSS 结合 HTML 元素实现了两种不同的“流光边框”效果的按钮。两者都是通过元素（或者伪元素）配合 CSS 动画属性 animation 与自定义动画帧 @keyframes 来实现的。这次我们通过 Vue 的动态样式和计算属性，来实现一个点击展开的圆环菜单，并且实现菜单图标的顺序显示。先上最终效果和代码：在实现过程中，我们按照以下步骤：1.整体结构 和 控制菜单展开/首起的按钮 2.控制按钮的 hover 状态 3.展开后的圆环 4.每个菜单的样式
html怎么把div弄成圆圈,html5怎么把一个div做成扇形 求大神指点~
weixin_42099151的博客
05-30 407
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>扇形</title><styletype="text/css">canvas{background:#A9A9A0}</style></head><body><can...
前端 CSS 经典：弧形边框选项卡
weixin_64684095的博客
05-16 563
准备一个元素，将元素左上角，右上角设为圆角。然后要在左右两边拼接弧形，我们可以写两个伪元素那怎么将这两个元素做成弧形呢，可以使用渐变。这下我们有了弧形，那怎么做成效果图的样式呢，最后我们可以使用旋转。
html如何实现透明的弧线效果,css3实现画半圆弧线的示例代码
weixin_32824725的博客
06-04 362
本文介绍了css3实现画半圆弧线的示例代码，分享给大家，具体如下：css代码.circle1 {width: 100px;height: 200px;border: 1px solid black;border-radius: 100% 0 0 100%/50%;border-right: none;}.circle2 {width: 200px;height: 100px;border: 1px...
CSS 神器：用纯 CSS 实现可爱精致的扇形动画
canshanyin的博客
06-04 1495
CSS 是前端开发中不可或缺的重要工具，它可以让网页变得美丽而生动。今天我们将介绍如何使用纯 CSS 实现一个有趣的扇形动画。本文将从以下几个方面来讲解这个示例代码的实现过程：设计思路、HTML 结构、CSS 样式。
创意css汉堡菜单动画,纯CSS3实现的汉堡菜单、飞碟和小行星动画
weixin_42516600的博客
08-03 237
CSS语言：CSSSCSS确定html,body {width: 100%;height: 100%;margin: 0;}body {background: #50C9C3;background: -webkit-linear-gradient(to left, #50C9C3, #96DEDA);background: linear-gradient(to left, #50C9C3, #96...
纯CSS3打造动感漂亮时尚的扇形菜单
09-25
扇形菜单想必大家对它并不陌生吧，本文为大家介绍下如何使用纯CSS3打造动感漂亮的扇形菜单，感兴趣的朋友可以学习下
纯CSS3实现扇形动画菜单(简化版)实例
09-24
在本文中，我们将探讨如何使用纯CSS3实现一个简化版的扇形动画菜单。这个菜单设计独特，动态效果美观，适用于各种现代网页设计。通过CSS3的特性，如变换（transform）、过渡（transition）以及伪类选择器，我们可以...
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
11-21
本主题聚焦于一个特别吸引人的设计元素——“css3扇形菜单”，它在鼠标悬停时通过css3旋转动画实现扇形展开，极大地提升了用户界面的互动性和美观度。下面将详细阐述这一技术的实现原理、关键CSS3属性以及应用方法。...
css扇形菜单动画效果
最新发布
前端程序媛_Ying博客
05-23 398
扇形菜单动画效果CSS
CSS3液态胶合效果环形菜单特效.zip
07-03
脚本简介CSS3液态胶合效果环形菜单特效是一款基于HTML5 CSS3实现的非常有创意的液态胶合效果环形菜单按钮特效。
js+css实现扇形导航效果
11-19
本文实例为大家分享了js+css实现扇形导航效果的具体代码，供大家参考，具体内容如下\ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扇形导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ height: 50px; width: 50px; /* background-color: pi
10大经典CSS3菜单应用欣赏
08-23
很多时候，我们的网页菜单需要个性化，从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用，菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 1、CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。 在线演示        源码下载 2、jQuery动画二级下拉菜单 对于jQuery菜单，大家已经非常熟悉了，我们也已经分享过很多jQuery菜单和CSS3菜单。今天要介绍的这款jQuery菜单是二级下拉菜单，并且在子菜单展开的时候出现动画效果。更为特别的是，鼠标滑过子菜单项时会产生该菜单项的提示。 在线演示        源码下载 3、CSS3 iPhone样式的3D菜单 之前已经向大家分享过很多漂亮的CSS3菜单了，很多菜单都支持多级下拉。今天要分享的CSS3菜单时模拟iPhone样式[......] 阅读全文>>
svg绘制扇形 可以改变数量
02-05
svg绘制善扇形，可以改变数量。 并且里面的文字 可以改变 位置 是垂直于圆心的
[CSS3学习]画出一个扇形
来福士戴尔 ● 派森！
11-29 4401
学习了下CSS3，朋友给出了个题目让用CSS3画出一个扇形 目标：用CSS3画出一个扇形 想法： 先画一个整圆；用方形div遮挡整圆的右半部分和下半部分；用一个旋转div遮挡1/4圆，从而使剩下的部分形成扇形。 代码： HTML： 扇形1 CSS： *{ border:0; margin:0
CSS3扇形动画菜单
web前端学习部落22群
02-05 935
CSS3扇形动画菜单                                                *{padding:0; margin: 0;}                             body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}          
css3实现扇形列表
冷色
08-01 1605
transform基本语法
css3实现360°扇形/饼图-简单易用
weixin_33686714的博客
07-03 757
为什么80%的码农都做不了架构师？>>> ...
纯css3液态胶合效果环形菜单按钮特效
10-09
纯CSS3液态胶合效果环形菜单按钮特效是一种可以通过CSS3实现的动态效果，该效果可以让菜单按钮在被点击或者悬停时出现液态胶合的效果，给用户带来更加直观的操作体验。 该效果的实现思路如下： 1. 首先，在HTML中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值