css3 给页面加个半圆形导航条

来源：互联网发布：《规划算法》编辑：程序博客网时间：2024/04/27 18:30

主要是利用了css3的 rolate(旋转) 和 skew (倾斜)样式

先上代码:

html 很简单

<body><button class="cn-button" id="cn-button">+</button><div class="cn-wrapper" id="cn-wrapper">   <ul>       <li><a href="a.html"><i class="fa fa-volume-down"></i></a></li>       <li><a href="#"><i class="fa fa-headphones"></i></a></li>       <li><a href="#"><i class="fa fa-home"></i></a></li>       <li><a href="#"><i class="fa fa-trophy"></i></a></li>       <li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>   </ul></div></body>

这里的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，接下来就是一些基本的样式了

全部代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"><style type="text/css">* {box-sizing: border-box;margin: 0;padding: 0;list-style: none;position: relative;}.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);}.open {-webkit-transform: scale(1);}.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;}.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;}.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;border-radius: 50%;padding-top: 2em;padding-right: 20px;-webkit-transform: skew(-50deg) rotate(-70deg) ;}.cn-wrapper li:first-child {left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(0deg) skew(50deg);}.cn-wrapper li:nth-child(2) {left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(36deg) skew(50deg);}.cn-wrapper li:nth-child(3) {left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(72deg) skew(50deg);}.cn-wrapper li:nth-child(4) {left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(108deg) skew(50deg);}.cn-wrapper li:nth-child(5) {left: 50%; top: 50%; margin-top: -1.3em; margin-left: -10em; overflow: hidden; -webkit-transform: rotate(144deg) skew(50deg);}.cn-wrapper li:nth-child(even) a {background-color: #a61414;background-color: hsla(0, 88%, 65%, 1);}.cn-wrapper li:nth-child(odd) a {background-color: #a11313;background-color: hsla(0, 88%, 63%, 1);}.cn-wrapper li a:hover {background-color: #a11313;}body {background-color:rgba(0,0,0,0.6);}</style></head><body><button class="cn-button" id="cn-button">+</button><div class="cn-wrapper" id="cn-wrapper">   <ul>       <li><a id="aaa1" href="a.html"><i class="fa fa-volume-down"></i></a></li>       <li><a href="#"><i class="fa fa-headphones"></i></a></li>       <li><a href="#"><i class="fa fa-home"></i></a></li>       <li><a href="#"><i class="fa fa-trophy"></i></a></li>       <li><a href="#"><i class="fa fa-exclamation-triangle"></i></a></li>   </ul></div></body><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript">var button = $("#cn-button");button.click(function(){$("#cn-wrapper").toggleClass("open");if (button.text() === "+") {button.text("-");} else {button.text("+");}});//button.addEventLis</script></html>

2 0