主要是利用了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;
新聞熱點
疑難解答
