記錄--用css畫扇形菜單

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1、效果圖

用手機錄屏再用小程式轉換的gif，可能精度上有點欠缺。

2、實現過程

1、觀察及思考

開始編碼前我們首先觀察展開後的結構：兩個四分之一的圓加三個圓形菜單項。 文章名為用css畫扇形，如上圖所示沒有任何Javascript輔助卻實現收縮展開的效果，如何實現的呢？

2、巧用標簽

圖文內容很簡單，兩個四分之一圓我們可以用<div>標簽實現。但是正如標題所示沒有JavaScript卻能實現實現交互，如何巧妙的使用標簽呢？我想到了label+input及藉助它們的偽類來實現。

<input checked="checked" type="checkbox">
<label for="menubtn">
    <i>開</i>
    <i>收</i>
</label>

需要註意的是：

1. label標簽內的for屬性應當與相關元素的id屬性相同， 意思就是label標簽配合input標簽使用時，label標簽中的for屬性和input標簽內的id屬性值要一樣，否則就不會將選中這個input選項。，比如：label標簽中的for屬性是menubtn，那麼input中的id屬性就必須是menubtn，否則label和input就不會關聯。
2. input的type屬性設置為checkbox。這裡我們必須將type屬性設置為checkbox覆選框類型，這是很重要的一個步驟。

3、實現深紫色小圓

通過觀察不難發現不管菜單展開還是收縮，紫色校園的狀態一直沒有改變，所以它的樣式就簡單多了。直接上樣式。

//把label轉換成塊級元素並定位
 label{display: block;transition: transform 0.5s, top 0.5s;position: absolute;bottom: 0;right: 0;margin: auto;z-index:99;cursor:pointer;}    
//使用偽類實現深紫色背景
 label::after{content:"";width:240px;height:240px;background-color:#8a2be1;position: absolute;bottom:-120px;right:-120px;border-radius: 50%;z-index: 9;}

4、實現淡紫色大圓

菜單展開的時候淡紫色背景和菜單一起顯示，收縮的時候和菜單一起隱藏。因此我們先來加菜單。

//菜單
<ul class="menu-list">
  <li><a>你</a></li>
  <li><a>好</a></li>
  <li><a>啊</a></li>
</ul>

//使用偽類實現淡紫色背景
.menu-list::after{content:"";width:560px;height:560px;background-color: #ebddf8;position: absolute;bottom:-280px;right:-280px;border-radius: 50%;z-index: 9;opacity: 1;transition: opacity .5s;}

5、完成交互

頁面基本上畫完，我們來實現交互效果。聰明的我們佈局的時候藉助了label+input組合，input覆選框標簽具有checked屬性，通過此屬性可以設置覆選框的選中狀態。於是便有了input{} input:checked{}
還有一個知識點，元素的兄弟元素：

element1~element2 {// CSS 屬性}element1 和 element2 是要選擇的兩個元素，~ 符號表示選擇 element1 後面的所有 element2 元素。
element1 + element2 {// CSS 屬性}+ 符號表示選擇 element1 後面的第一個 element2 元素。
CSS 元素的兄弟元素很重要，可以方便地選擇相鄰的元素併進行樣式設置。 重要的知識點就這麼多，剩下的修修補補，畫畫圓定定位，這裡不做過多贅述。

6、收工

上代碼~

html：

 <div class="menu mvcenter">
        <input checked="checked" class="menu-btn mvcenter" id="menubtn" type="checkbox">
        <label for="menubtn">
            <i class="iconfont icon-caidan">開</i>
            <i class="iconfont icon-quxiaoguanbi1">收</i>
        </label>
        <ul class="menu-list">
          <li class="mvcenter menu-item"><a class="iconfont icon-lianxi">你</a></li>
          <li class="mvcenter menu-item"><a class="iconfont icon-dizhi">好</a></li>
          <li class="mvcenter menu-item"><a class="iconfont icon-fankui">啊</a></li>
          <li class="mvcenter menu-item"><a class="iconfont icon-fankui">啊</a></li>
        </ul>
    </div>

 body,ul,li,input,div{padding:0;margin:0;}      
        body{overflow: hidden;}  
        i{font-style: normal;}
        .mvcenter{position: absolute;bottom:20px;right:20px;}
        .menu-btn.mvcenter{margin-top: -20px;margin-left:-20px;}
        .menu-btn{width:40px;height:40px;cursor: pointer;background-color: red;border-radius: 20px;display: block;z-index: 99;opacity: 0;}
        .menu-btn + label{display: block;transition: transform 0.5s, top 0.5s;position: absolute;bottom: 0;right: 0;margin: auto;z-index:99;cursor:pointer;}        
        .menu-btn + label i{color:#fff; font-size:40px;position: absolute;bottom:5px;right:0;z-index: 12;}
        .menu-btn + label i.icon-caidan,.menu-btn:checked + label i.icon-quxiaoguanbi1{opacity: 1;}
        .menu-btn + label i.icon-quxiaoguanbi1,.menu-btn:checked + label i.icon-caidan{opacity: 0;}
        .menu-btn:checked + label + .menu-list::after{opacity: 1;}
        .menu-btn + label::after{content:"";width:240px;height:240px;background-color:#8a2be1;position: absolute;bottom:-120px;right:-120px;border-radius: 50%;z-index: 9;}

        .menu-list::after{content:"";width:560px;height:560px;background-color: #ebddf8;position: absolute;bottom:-280px;right:-280px;border-radius: 50%;z-index: 9;opacity: 0;transition: opacity .5s;}
        .menu-list > li.mvcenter{margin-top: -40px;margin-left:-40px;}
        .menu-list > li{width:70px;height:70px;border-radius:80px;border:3px solid #b880eb;color:#8a2be1;display: flex;align-items: center;justify-content: center; opacity: 0;transition: all .5s;transform-origin: center center;z-index: 12;}
        .menu-list > li:nth-child(1){transform:rotate(0)}
        .menu-list > li:nth-child(2){transform:rotate(-45deg)}
        .menu-list > li:nth-child(3){transform:rotate(-90deg)}

        .menu-list > li a{font-size:30px;font-weight: bold;}
        .menu-list > li:nth-child(1) a{transform:rotate(10deg)}
        .menu-list > li:nth-child(2) a{transform:rotate(-45deg)}
        .menu-list > li:nth-child(3) a{transform:rotate(-90deg)}

        .menu-btn:checked ~ ul .menu-item {opacity: 1;}
        .menu-btn:checked ~ ul .menu-item:nth-child(1) {transform: rotate(0) translateX(-120px);}
        .menu-btn:checked ~ ul .menu-item:nth-child(2) {transform: rotate(45deg) translateX(-120px);}
        .menu-btn:checked ~ ul .menu-item:nth-child(3) {transform: rotate(90deg) translateX(-120px);}

本文轉載於:

https://juejin.cn/post/7265624177775624252

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。