这是一款效果非常有创意的纯CSS3液态胶合效果的环形菜单按钮特效。该环行菜单按钮在用户点击主菜单按钮后,两行子菜单会以环状的方式打开,并且子菜单就像液体一样,能够胶合,具有弹性,效果非常炫酷。
查看原文
查看在线演示Demo和更多原文内容教程:纯CSS3液态胶合效果的环形菜单按钮特效
使用方法
HTML结构
在HTML结构中,主菜单按钮使用input[type='checkbox']
的复选框和一个<label>
元素来制作。子菜单按钮是一组<button>
元素。
<div class='wrap'>
<input type='checkbox' id='checking' style='display:none;' />
<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 class='blob' for='checking'>
<span class='bar'></span>
<span class='bar'></span>
<span class='bar'></span>
</label>
</div>