当前位置:首页 / 网页制作 / CSS教程 / CSS3实现扇形动画菜单流程介绍
CSS3实现扇形动画菜单流程介绍
芯晴素材特效 分类:CSS教程 发布日期:2018-05-07

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

原文章请点击这里

简化版完整实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!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>

效果图如下:

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jQuery手机端上拉下拉刷新页面网页下载

2017-03-14   浏览:274

jQuery实现图片滑动导航

2017-03-16   浏览:439

jQuery心型图片墙鼠标悬浮变大

2017-03-17   浏览:497

jQuery+CSS3实现黑色圆形时钟网页下载

2017-03-13   浏览:444

jQ OSX底部工具箱

2017-03-18   浏览:343

jQuery房地产贷款计算器网页下载

2017-03-13   浏览:453

jQuery金币抽奖效果网页下载下载

2017-03-14   浏览:184

一款红色风格JS+CSS竖向tab选项卡

2013-01-14   浏览:9290

jQuery简易日历插件下载

2017-03-13   浏览:505

JS实现文字从页面顶部掉下来的效果

2013-01-11   浏览:8445

仿win7界面弹出窗口放大缩小网页下载

2017-03-14   浏览:116

支持背景图片的圆角效果的矩形

2013-01-09   浏览:8002