当前位置:首页 / 网页制作 / 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版淡出淡入的图片幻灯切

2013-01-15   浏览:8809

全屏游动的图片,可以飘到浏览器外边

2012-12-30   浏览:7987

JS+CSS打造的鼠标点击触发的导航菜单

2013-01-04   浏览:9863

前端模拟微信app支付页面效果

2017-03-09   浏览:265

html5手机端图片上传裁剪网页下载

2017-03-13   浏览:219

jQuery标签插件flyLabel

2017-03-16   浏览:368

一款CSS+JS打造的个性菜单

2013-01-04   浏览:7845

JS实现的螺旋效果

2012-12-27   浏览:7912

用CSS控制滚动条样式

2012-12-31   浏览:8114

Canvas粒子线条连接动态背景特效

2017-05-04   浏览:859

又一款纯CSS实现的滑动门,代码非常简

2013-01-04   浏览:9039

文字切换插件Adjector.js

2017-03-13   浏览:195