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

您可能在找这些

  • 内容标签:

热门素材

jq多图图片通栏切换网页下载

2017-03-15   浏览:346

漂亮的JS滑动门式图片自动切换效果

2013-01-14   浏览:9505

音乐专辑推荐展示JS网页下载

2017-03-12   浏览:217

jq二维码生成插件

2017-03-19   浏览:146

jq双重滚动效果

2017-03-19   浏览:337

HTML5手机登录注册表单网页下载

2017-03-14   浏览:345

jq左右透明遮罩图片切换网页下载

2017-03-15   浏览:186

表单效果之输入框随鼠标点击换色

2013-01-03   浏览:8126

一款漂亮的蓝色风格CSS竖向菜单

2013-01-06   浏览:8009

jQuery可自定义高度图片瀑布流网页下载

2017-03-14   浏览:101

[酷] 模仿Windows飞行视窗的登陆框

2012-12-31   浏览:8245

html5酒店预订日期选择手机日历

2017-03-14   浏览:500