纯CSS3液态胶合效果环形菜单特效

点击上方蓝字关注我哦

我们要实现这样的效果,首先看我们的html结构

<div class="wrap">

      <input type="checkbox" id="check" />

      <button class="blob">★</button>

      <button class="blob">✉</button>

      <button class="blob">⚙</button>

      <button class="blob">✆</button>

      <button class="blob">✎</button>

      <button class="blob">♫</button>

      <button class="blob">✌</button>

      <button class="blob">❤</button>

      <label for="check">

        <i></i>

        <i></i>

        <i></i>

      </label>

    </div>

<!--本质上利用label for属性绑定input的id控制每一个button的显示  这时候点击label相当于点击input-->

   然后书写CSS样式  

* {

    margin: 0;

    padding: 0

}

body {

    background-color: #000

}