本篇内容介绍了“css3怎么给页面加个半圆形导航条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联建站-专业网站定制、快速模板网站建设、高性价比信丰网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式信丰网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖信丰地区。费用合理售后完善，十载实体公司更值得信赖。
主要是利用了css3的 rolate(旋转) 和 skew (倾斜)样式
先上代码:
html 很简单
代码如下:
这里的i标签 用了一个第三方库 http://fortawesome.github.io/Font-Awesome/icons/
接下来是css
先来个半圆形button
代码如下:
.cn-button {
outline: none;
border: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
主要起作用的是
代码如下:
border-radius: 50%;
可以试一下,如果想把一个div变成圆形,就用这行代码,那半圆呢? 你把剩下半个挡住不就OK了！
我们把 cn-warpper也变成半圆的
代码如下:
.cn-wrapper {
width: 26em;
height: 26em;
position: fixed;
z-index: 10;
bottom: 0;
left: 50%;
margin-left: -200px;
border: 1px solid #7C5089;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: 50%;
overflow: hidden;
bottom: -13em;
-webkit-transform: scale(0);
}
代码如下:
-webkit-transform: scale(0);
是为了让它一开始不显示
接下来是重头戏了，如何把半圆分成5个li
首先给li加基本样式，宽高，让他们重叠
代码如下:
.cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
overflow: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
background-color: #eee;
-webkit-transition: all 1s ease;
transition: all 1s ease;
color: #aaa;
}
代码如下:
overflow: hidden;
这个必须有，后面说明！
然后 让li变斜，为什么变斜？如果都是正方形，要不然怎么够分呢？
代码如下:
.cn-wrapper li:first-child {
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
overflow: hidden;
-webkit-transform: rotate(0deg) skew(50deg);
}
变斜的关键
代码如下:
-webkit-transform: rotate(0deg) skew(50deg);
skew（50deg）就是在水平方向倾斜50度（姑且称之为度），rotate围绕自己旋转0度 也就是不转，第一个li不用转，只用倾斜就可以，后面的li要依次旋转36度，为什么36度？ 180/5
然后就是li下的a了
代码如下:
.cn-wrapper li a {
display: block;
font-size: 1.2em;
height: 14.5em;
width: 13.5em;
position: absolute;
bottom: -6.75em;
right: -6.75em;
text-decoration: none;
color: white;
-webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, -webkit-transform .8s ease;
transition: background-color .3s ease, transform .8s ease;
text-align: center;
padding-top: 2em;
padding-right: 20px;
-webkit-transform: skew(-50deg) rotate(-70deg);
}
代码如下:
text-align: center;
padding-top: 2em;
padding-right: 20px;
这些都是为了设置icon的位置，没什么要说的
代码如下:
-webkit-transform: skew(-50deg) rotate(-70deg);
为了迎合父节点li的变斜，所以skew为负50度，rotate负70 （这样也是为了icon能在div中间显示text-align:center）
接下来你可以把上边的overflow::hidden去掉试试看，是不是全乱了？这段代码就是为了抱住其子节点的样式，即使子节点的样式是乱的，只要不让它显示出来就可以了。
OK，接下来就是一些基本的样式了
全部代码：
代码如下:
Insert title here
“css3怎么给页面加个半圆形导航条”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
文章名称：css3怎么给页面加个半圆形导航条-创新互联
本文URL：
http://cdkjz.cn/article/cosjjs.html
