当前位置:首页 / 网页制作 / 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(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

回到顶端插件ScrollUp

2017-03-18   浏览:374

html5仿手机QQ拆红包游戏网页下载

2017-03-13   浏览:491

强制打开QQ聊天窗口的代码

2013-01-03   浏览:8432

CSS3鼠标滑过渐变颜色旋转图标特效

2017-03-09   浏览:309

跟随鼠标的幻影文字效果

2013-01-08   浏览:9057

内容倾斜幻灯片Tilted Items

2017-02-27   浏览:460

jq hover鼠标滑过动画导航条

2017-03-17   浏览:479

css3高版本浏览器下垂直文字放大镜效

2017-03-09   浏览:165

跟随鼠标的JS时钟

2012-12-31   浏览:8182

jQuery图片新闻组图幻灯切换网页下载

2017-03-13   浏览:368

网易时尚图片循环特效

2017-03-09   浏览:193

jQ带日期区间日期选择插件

2017-03-14   浏览:392