本篇內(nèi)容介紹了“css3怎么給頁(yè)面加個(gè)半圓形導(dǎo)航條”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比信豐網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式信豐網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋信豐地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。主要是利用了css3的 rolate(旋轉(zhuǎn)) 和 skew (傾斜)樣式
先上代碼:
html 很簡(jiǎn)單
代碼如下:
這里的i標(biāo)簽 用了一個(gè)第三方庫(kù) http://fortawesome.github.io/Font-Awesome/icons/
接下來(lái)是css
先來(lái)個(gè)半圓形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%;
可以試一下,如果想把一個(gè)div變成圓形,就用這行代碼,那半圓呢? 你把剩下半個(gè)擋住不就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);
是為了讓它一開(kāi)始不顯示
接下來(lái)是重頭戲了，如何把半圓分成5個(gè)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;
這個(gè)必須有，后面說(shuō)明！
然后 讓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);
}
變斜的關(guān)鍵
代碼如下:
-webkit-transform: rotate(0deg) skew(50deg);
skew（50deg）就是在水平方向傾斜50度（姑且稱之為度），rotate圍繞自己旋轉(zhuǎn)0度 也就是不轉(zhuǎn)，第一個(gè)li不用轉(zhuǎn)，只用傾斜就可以，后面的li要依次旋轉(zhuǎn)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;
這些都是為了設(shè)置icon的位置，沒(méi)什么要說(shuō)的
代碼如下:
-webkit-transform: skew(-50deg) rotate(-70deg);
為了迎合父節(jié)點(diǎn)li的變斜，所以skew為負(fù)50度，rotate負(fù)70 （這樣也是為了icon能在div中間顯示text-align:center）
接下來(lái)你可以把上邊的overflow::hidden去掉試試看，是不是全亂了？這段代碼就是為了抱住其子節(jié)點(diǎn)的樣式，即使子節(jié)點(diǎn)的樣式是亂的，只要不讓它顯示出來(lái)就可以了。
OK，接下來(lái)就是一些基本的樣式了
全部代碼：
代碼如下:
“css3怎么給頁(yè)面加個(gè)半圓形導(dǎo)航條”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
