CSS3打造的超酷的多级扇形菜单

最新推荐文章于 2021-06-11 15:23:24 发布
最新推荐文章于 2021-06-11 15:23:24 发布
阅读量208 收藏 1
点赞数
原文链接：http://www.cnblogs.com/youtianxia/p/4387758.html
版权 
<!DOCTYPE HTML>
    <html lang=zh-cn>
    <head>
    <meta charset=utf-8>
    <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>
    <br><font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</p></font>
    <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="/"><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>

 

转载于:https://www.cnblogs.com/youtianxia/p/4387758.html

weixin_30551947
关注
纯CSS3打造动感漂亮的扇形菜单
01-26
纯CSS3打造动感漂亮的扇形菜单网页代码站
超酷响应式css3+jquery多级导航菜单效果
12-13
本教程将深入探讨如何使用CSS3和jQuery创建一个“超酷响应式css3+jquery多级导航菜单效果”。这个菜单不仅外观时尚，而且具备良好的用户体验，尤其适用于有限的屏幕空间。 首先，让我们了解一下CSS3。CSS3是层叠...
css3扇形菜单
榴莲不好吃的专栏
09-08 2765
尊重劳动成果，转载请注明出处（http://blog.csdn.net/sllailcp/article/details/48288959）... 闲暇之余做的一个css3扇形菜单 完整代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
下拉菜单示例
热门推荐
Walker7143的博客
04-22 1万+
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码
weixin_30291121的博客
06-11 559
之前的一篇文章介绍这种效果的实现，但实现代码太过繁琐，所以在这里分享以下简化版的实现方法，有需要的可以参考学习。原文章请点击这里简化版完整实例CSS3扇形动画菜单*{padding: 0; margin: 0;}body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}.menuHolder {width:1...
扇形导航菜单
weixin_30723433的博客
08-02 560
1.装bi界的一股清流，基本没什么用，反而把页面搞复杂了。 2.这些用法值得学习和借鉴。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3扇形动画菜单</ti...
纯CSS3打造动感漂亮时尚的扇形菜单
09-25
纯CSS3打造动感、漂亮、时尚的扇形菜单涉及到现代网页设计中的一些前沿技术，包括CSS3中的过渡、变换、以及对伪元素的运用等。为了打造一个既能吸引用户又能具有良好交互体验的菜单，我们通常需要考虑菜单的视觉效果...
CSS3扇形动画菜单 鼠标滑过扇形展开动画
08-23
我们之前已经分享过很多CSS3菜单了，很多都比较实用，有部分CSS3菜单外观比较炫酷。今天要分享的这款CSS3菜单外观是扇形的，并且在鼠标滑过菜单时，扇形菜单项将会以动画的方式展开，并且支持多级下拉菜单。
纯css3展开扇形弧形多个菜单.rar
09-28
在本项目中，"纯css3展开扇形弧形多个菜单.rar" 提供了一个使用纯CSS3技术构建的扇形动画菜单。这个菜单设计简洁，动态效果独特且时尚，非常适合现代网页设计。然而，需要注意的是，这个菜单并不支持较旧的Internet ...
CSS黑色超酷多级菜单.rar
07-04
【CSS黑色超酷多级菜单】是一个典型的网页设计元素，主要使用CSS（层叠样式表）来实现一种具有视觉吸引力的、多级别的导航菜单。在网页设计中，菜单导航是必不可少的部分，它帮助用户轻松地浏览网站的不同部分。这个...
纯CSS3实现扇形动画菜单(简化版)实例
09-24
主要给大家介绍了利用纯CSS3实现扇形动画菜单(简化版)实例源码，文中给出了完整的示例源码，实现后的效果非常动感漂亮时尚，需要的朋友可以参考借鉴，下面来一起看看吧。
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
11-21
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码 css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码 css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
CSS3仿移动淘宝左下角扇形菜单效果
07-30
CSS3仿移动淘宝左下角扇形菜单效果 ---适合在移动端使用 没有在PC端老浏览器中兼容 。 在移动端打开背景色也许会有问题，这里将css背景色改为背景图即可，具体可以参考淘宝做法
悬浮的扇形菜单CircularFloatingActionMenu
10-26
CircularFloatingActionMenu悬浮的扇形菜单，使用的时候需要 compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2'
css3制作扇形菜单
weixin_30822451的博客
07-27 442
工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html以及原网站http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-trans...
扇形多级菜单可配置Demo
weixin_30567471的博客
04-22 122
预览效果 领导是想把这个做成复选框，所以做成了可以多选的... Demo下载：https://github.com/zhangzn3/arc-menu 转载于:https://www.cnblogs.com/leyi/p/6747620.html
CSS3扇形动画菜单
web前端学习部落22群
02-05 960
CSS3扇形动画菜单                                                *{padding:0; margin: 0;}                             body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}          
CSS3 扇形选项卡
Cokeny的博客
02-05 450
效果图： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;&amp;
纯CSS3实现动态时尚扇形菜单教程
"纯CSS3实现的扇形菜单制作教程" 在网页设计中，动态且具有视觉吸引力的菜单能够提升用户体验，使网站更加引人入胜。本教程将详细介绍如何利用CSS3技术来创建一款动感、漂亮的扇形菜单。纯CSS3的方法允许我们在不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值