html四个圆圈,css3实现扇形导航，一个圆形加4个扇形_html/css_WEB-ITnose

效果图：

主要实现过程:

1)4个Li元素，把他们的定位都设置未absolute.

2)改变li的旋转中心到右下角 transform-origin: 100% 100%; 4个对应旋转的角度为0,90,180,270deg

3)定位第五个li在中心

4)前面的4个li都往其所在角偏移10PX，以显示间隙

5)4个li里面的a标签设置渐变的背景色，让圆心位置的颜色设置为隐藏 background: -webkit-radial-gradient(right bottom, transparent 35%, #eee 35%);

源码：

.nav { width: 300px; height: 300px; /*border:1px solid blue;*/ position: fixed; top: 10%; left: 30%; border-radius: 50%; overflow: hidden;}.nav li { position: absolute; width: 150px; height: 150px; transform-origin: 100% 100%;}.nav li a:hover { background: -webkit-radial-gradient(right bottom, transparent 35%, #2e2e2e 35%);}.nav li a { display: block; position: absolute; width: 150px; height: 150px; background: -webkit-radial-gradient(right bottom, transparent 35%, #eee 35%);}.nav li:nth-child(1) { transform: rotate(0deg); left: -10px; top: -10px;}.nav li:nth-child(2) { transform: rotate(90deg); left: 10px; top: -10px;}.nav li:nth-child(3) { transform: rotate(180deg); top: 10px; left: 10px;}.nav li:nth-child(4) { transform: rotate(270deg); top: 10px; left: -10px;}.nav li:nth-child(5) { border-radius: 100%; transform: scale(0.9); left: 27.5%; top: 27.5%; transform-origin: 0 0; background: #eee}.nav li:nth-child(5) a { background: #eee; border-radius: 100%;}.nav li:nth-child(5) a:hover { background: #2e2e2e; border-radius: 100%;}.icon { opacity: 0.7; display: inline-block; width: 80px; height: 70px; text-align: center; font-size: 30px; background: url(../img/mes.png); transform: rotate(-50deg) translate(-5%, 83%);}

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网