工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html以及原网站http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms,作者讲得很详细,我就不多说了,下面是我的demo：

有一部分浏览器不支持css3，还需要为其设置另一套样式，通过js判断浏览器类型，并替换样式。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>纯CSS扇形菜单</title>

    <style type="text/css">

        /*导航外层div设为圆形*/

        .css-transforms .menu-wrapper {

            overflow: hidden;

            zoom: 1;

            position: relative;

            width: 460px;

            height: 460px;

            margin: 40px auto 0;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            background: transparent;

            pointer-events: auto;

            border: 1px solid #000;

        }

        /*覆盖a标签的内侧靠近圆心的部分, 避免鼠标点击事件*/

        .css-transforms .menu-wrapper:after{

            color: transparent;

            content:".";

            display:block;

            position: absolute;

            z-index:10;

            left: 50%;

            top:50%;

            margin-left: -150px;

            margin-top: -150px;

            width: 300px;

            height: 300px;

            -webkit-border-radius: 50%;

            -moz-border-radius: 50%;

            border-radius: 50%;

            border: 1px solid blue;

        }

        .css-transforms .menu-wrapper li {

            position: absolute;

            top: -70px;

            left: -70px;

            overflow: hidden;

            width: 300px;

            height: 300px;

            transform-origin: 100% 100%;

            pointer-events: none;

            border: 1px solid green;

        }

        /*a标签反倾斜角度为-(90-x),旋转角度为-x,x为我们想要的圆心角,在这个demo里,有3个列表项,半圆,得出圆心角为60*/

        .css-transforms .menu-wrapper li a {

            position: absolute;

            right: -200px;

            bottom: -200px;

            display: block;

            width: 420px;

            height: 420px;

            border-radius: 50%;

            color: #fff;

            text-align: center;

            text-decoration: none;

            /*先斜切后旋转,不可颠倒*/

            -webkit-transform: skew(-30deg) rotate(-60deg) scale(1);

            -moz-transform: skew(-30deg) rotate(-60deg) scale(1);

            -ms-transform: skew(-30deg) rotate(-60deg) scale(1);

            -o-transform: skew(-30deg) rotate(-60deg) scale(1);

            transform: skew(-30deg) rotate(-60deg) scale(1);

            pointer-events: auto;

        }

        .css-transforms .menu-wrapper li a span{

            display: none;

        }

        /*列表项倾斜角度为90-x,每个列表项的旋转角度依次间隔 >60 */

        .css-transforms .menu-wrapper li:first-child {

            -webkit-transform: rotate(-10deg) skew(30deg);

            -moz-transform: rotate(-10deg) skew(30deg);

            -ms-transform: rotate(-10deg) skew(30deg);

            -o-transform: rotate(-10deg) skew(30deg);

            transform: rotate(-10deg) skew(30deg);

        }

        .css-transforms .menu-wrapper li:nth-child(2) {

            -webkit-transform: rotate(60deg) skew(30deg);

            -moz-transform: rotate(60deg) skew(30deg);

            -ms-transform: rotate(60deg) skew(30deg);

            -o-transform: rotate(60deg) skew(30deg);

            transform: rotate(60deg) skew(30deg);

        }

        .css-transforms .menu-wrapper  li:nth-child(3) {

            -webkit-transform: rotate(-130deg) skew(30deg);

            -moz-transform: rotate(-130deg) skew(30deg);

            -ms-transform: rotate(-130deg) skew(30deg);

            -o-transform: rotate(-130deg) skew(30deg);

            transform: rotate(130deg) skew(30deg);

        }

        .css-transforms .menu-wrapper li a span{

            display: none;

        }

        .css-transforms .menu-wrapper li:first-child a{

            background: radial-gradient(transparent 45%, #dc7d01 35%);

        }

        .css-transforms .menu-wrapper li:nth-child(2) a{

            background: radial-gradient(transparent 45%, #a70101 35%);

        }

        .css-transforms .menu-wrapper li:nth-child(3) a{

            background: radial-gradient(transparent 45%, #017d07 35%);

        }

        .css-transforms .menu-wrapper li:first-child a:hover,

        .css-transforms .menu-wrapper li:first-child a:active,

        .css-transforms .menu-wrapper li:first-child a:focus {

            background: radial-gradient(transparent 45%, #e88503 35%);

        }

        .css-transforms .menu-wrapper li:nth-child(2) a:hover,

        .css-transforms .menu-wrapper li:nth-child(2) a:active,

        .css-transforms .menu-wrapper li:nth-child(2) a:focus {

            background: radial-gradient(transparent 45%, #b40303 35%);

        }

        .css-transforms .menu-wrapper li:nth-child(3) a:hover,

        .css-transforms .menu-wrapper li:nth-child(3) a:active,

        .css-transforms .menu-wrapper li:nth-child(3) a:focus {

            background: radial-gradient(transparent 45%, #028b09 35%);

        }

        .css-transforms .menu-wrapper li:first-child  a img{

            margin-top: 8px;

            -webkit-transform: rotate(-25deg);

            -moz-transform: rotate(-25deg);

            -ms-transform: rotate(-25deg);

            -o-transform: rotate(-25deg);

            transform: rotate(-25deg);

        }

        .css-transforms .menu-wrapper li:nth-child(2) a img{

            margin-top: 21px;

        }

        .css-transforms .menu-wrapper  li:nth-child(3) a img{

            margin-top: -2px;

            -webkit-transform: rotate(-60deg);

            -moz-transform: rotate(-60deg);

            -ms-transform: rotate(-60deg);

            -o-transform: rotate(-60deg);

            transform: rotate(-60deg) ;

        }

        /*不支持css3*/

        .no-transforms .menu-wrapper{

            margin:10em auto;

            overflow:hidden;

            text-align:center;

            padding:1em;

            border: 1px solid #000;

        }

        .no-transforms .menu-wrapper ul{

            display:inline-block;

        }

        .no-transforms li{

            width:120px;

            height:50px;

            float:left;

            line-height:50px;

            text-align:center;

            margin-right: 20px;

            background-color: #fff;

            /*border: 1px solid red;*/

        }

        .no-transforms li a{

            display:block;

            height:100%;

            width:100%;

            line-height: 50px;

            text-decoration: none;

            color: #fff;

        }

        .no-transforms .menu-wrapper li a span{

            display: block;

        }

        .no-transforms .menu-wrapper li a img{

            display: none;

        }

        .no-transforms li a.first{

            background-color: #e88503;

        }

        .no-transforms li a.second{

            background-color: #b40303;

        }

        .no-transforms li a.last{

            background-color: #028b09;

        }

        .no-transforms .menu-wrapper li a:hover,

        .no-transforms .menu-wrapper li a:active,

        .no-transforms .menu-wrapper li a:focus{

            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

        }

    </style>

</head>

<body>

<div class="css-transforms" id="box">

    <div class="menu-wrapper">

        <ul>

            <li><a href="#" class="first"><img src="./font-1.png" alt=""><span>彝族音乐图片</span></a></li>

            <li><a href="#" class="second"><img src="./font-2.png" alt=""><span>彝族音乐理论</span></a></li>

            <li><a href="#" class="last"><img src="./font-3.png" alt=""><span>彝族音乐</span></a></li>

        </ul>

    </div>

</div>

<script>

    //为不支持css3的浏览器更换样式

    var wrapper = document.getElementById('box');

    var supports = (function() {

        var div = document.createElement('div'),

                vendors = 'Khtml Ms O Moz Webkit'.split(' '),

                len = vendors.length;

        return function(prop) {

            if ( prop in div.style ) return true;

            prop = prop.replace(/^[a-z]/, function(val) {

                return val.toUpperCase();

            });

            while(len--) {

                if ( vendors[len] + prop in div.style ) {

                    return true;

                }

            }

            return false;

        };

    })();

    if ( !supports('transform') ) {

        removeClass(wrapper, 'css-transforms');

        addClass(wrapper, 'no-transforms');

    }

    function hasClass(obj, cls) {

        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

    }

    function addClass(obj, cls) {

        if (!this.hasClass(obj, cls)) obj.className += " " + cls;

    }

    function removeClass(obj, cls) {

        if (hasClass(obj, cls)) {

            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

            obj.className = obj.className.replace(reg, ' ');

        }

    }

</script>

</body>

</html>

效果如下:

css3制作扇形菜单的更多相关文章

  1. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  2. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  6. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  7. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  8. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  9. 用CSS3制作很特别的波浪形菜单

    原文:用CSS3制作很特别的波浪形菜单 网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背景,看上去还挺不错的,下面看下一效 ...

随机推荐

  1. JavaScript对象属性

    JavaScript对象的属性有两类:数据属性和访问器属性 数据属性 数据属性有四个特性,分别为: [[value]]属性的值 [[writeable]]属性是否可以修改 [[enumerable]] ...

  2. PHP生成类似类似优酷、腾讯视频等其他视频链的ID

    不知道你注意了没有,类似优酷.腾讯视频等其他视频链接似乎类似这样的 http://v.youku.com/v_show/id_XNjA5MjE5OTM2.html 注意id_xxx那段,是不是看不懂了 ...

  3. gzip, gunzip, zcat - 压缩或展开文件

    总揽 gzip [ -acdfhlLnNrtvV19 ] [-S 后缀] [ 文件名 ... ] gunzip [ -acfhlLnNrtvV ] [-S 后缀] [ 文件名 ... ] zcat [ ...

  4. C08 C语言预处理命令

    目录 宏定义 文件包含 条件编译 预处理命令 C语言的预处理:在编译之前进行的处理,不进行编译. C语言的预处理功能有: 宏定义 文件包含 条件编译 预处理命令以符号“#”开头.. 宏定义 不带参数的 ...

  5. javaweb基础(9)_Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:

  6. java基础—java对象的序列化和反序列化

    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...

  7. Tomcat详细安装配置

    1.首先是Tomcat的获取和安装. 获取当然得上Apache的官方网站下载,开源免费,而且带宽也足够.下载会很快. 这是两种不同的下载,一个是普通安装版本,一个是解压安装版本.使用起来是一样的,只是 ...

  8. Oracle数据库常用的Sql语句整理

    Oracle数据库常用的Sql语句整理 查看当前用户的缺省表空间 : select username,default_tablespace from user_users; 2.查看用户下所有的表 : ...

  9. MySQL索引类型及优化

    索引是快速搜索的关键.MySQL索引的建立对于MySQL的高效运行是很重要的.下面介绍几种常见的MySQL索引类型. 在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytabl ...

  10. 判断是否是同一人的方法——equals()？在Person类中提供一个比较的方法compare()返回boolean值？对象自己和自己比？

    判断是否是同一人的方法——equals() 不能直接用per1==per2,这不是对象内容的比较而是存放对象地址的值得比较 在Person类中提供一个比较的方法compare()返回boolean值 ...