css3制作八棱锥_css3制作扇形菜单

纯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);

}

• 彝族音乐图片
• 彝族音乐理论
• 彝族音乐