主要是利用了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;
新闻热点
疑难解答
