CSS3实现扇形动画菜单特效

最新推荐文章于 2024-05-23 13:03:42 发布

Foryourfuture

最新推荐文章于 2024-05-23 13:03:42 发布

阅读量973

点赞数

本文链接：https://blog.csdn.net/qq_36190858/article/details/86152185

版权

CSS3实现扇形动画菜单特效

效果图：

代码如下，复制即可使用：

<!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

最低0.47元/天解锁文章

Foryourfuture

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现扇形动画菜单特效

CSS3实现扇形动画菜单特效 CSS3实现扇形动画菜单特效效果图：代码如下，复制即可使用：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3实现扇形...
复制链接

扫一扫