css3制作扇形菜单

工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了
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>

效果如下:

转载于:https://www.cnblogs.com/sapho/p/5711203.html

css3制作扇形菜单相关推荐

纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
CSS3实现扇形动画菜单特效
CSS3实现扇形动画菜单特效 CSS3实现扇形动画菜单特效效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><me ...
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里简化版完整实例 CSS3扇形动画菜单 *{padding: ...
10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
html5 css3左侧多级菜单,modernizr.custom.js制作html5 CSS3多级层叠侧边菜单导航栏
特效描述:modernizr.custom.js html5CSS3 多级层叠侧边菜单导航栏.CSS3多级层叠菜单代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 All Categ ...

css3制作扇形菜单

css3制作扇形菜单相关推荐

最新文章

热门文章