主要是利用了css3的 rolate(旋轉) 和 skew (傾斜)樣式
先上**:
html 很簡單
+
接下來是css
先來個半圓形button
.cn-buttonborder-radius: 50%;我們把 cn-warpper也變成半圓的
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加基本樣式，寬高，讓他們重疊
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變斜，為什麼變斜？如果都是正方形，要不然怎麼夠分呢？？
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);然後就是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;
-webkit-transform: skew(-50deg) rotate(-70deg);接下來你可以把上邊的overflow::hidden去掉試試看，是不是全亂了？這段**就是為了抱住其子節點的樣式，即使子節點的樣式是亂的，只要不讓它顯示出來就可以了。
ok，接下來就是一些基本的樣式了
全部**：
css行間距 使用CSS實現半圓形鋸齒分隔線效果
在移動端web開發中我們經常會碰到半圓形鋸齒分隔線設計，如下圖紅色框部分，這其實是模擬了真實場景中的紙質賬單。需要特別提醒的是，整個卡片是有陰影的，所以分隔線部分也需要有陰影效果。可能很多同學會說 這個還不好實現，直接讓ui切個圖不就行了。實踐證明這種方法是可以，但是會有一點小問題 1 半圓形鋸齒分...
css3畫半圓的兩種方法
h2 用border radius實現半圓 h2 ul class clearfix li class circle1 上邊圓 li li class circle2 左邊圓 li li class circle3 下邊圓 li li class circle4 左邊圓 li li class ci...
CSS3 圓形動畫導航
因為圓一共分為六份，每兩份被乙個父元素包裹，設定父元素旋轉，並且對沒乙份再次設定旋轉，使文字始終保持是正文不會出現傾斜，不易 html class box class top 1span 4span div class top 2span 5span div class top 6span 3spa...