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


Posted in HTML / CSS onMarch 18, 2014

复制代码
代码如下:

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

</body>
</html>

HTML / CSS 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 #HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 #HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 #HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
You might like
PHP 面向对象详解
2012/09/13 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php实现图片添加水印功能
2014/02/13 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
asp 的 分词实现代码
2007/05/24 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
安全目标管理责任书
2014/07/25 职场文书
行政诉讼答辩状
2015/05/21 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
详解python网络进程
2021/06/15 Python
python垃圾回收机制原理分析
2022/04/13 Python