 我们要实现这样的效果,首先看我们的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 } .wrap { position: relative; width: 230px; height: 250px; border: 1px solid red; margin: 50px auto; }  .wrap label { position: absolute; left: 0px; top: 10px; width: 70px; height: 70px; background-color: #f44336; text-align: center; border-radius: 35px; /* font-size:0; */ line-height: 1; } .wrap label i { display: inline-block; width: 40px; height: 6px; background-color: #fff; border-radius: 4px; }  最后是每一个图标菜单的样式,一开始肯定是叠在一起的并且被Label覆盖 我们可以使用绝对定位去实现. 之后input被点击后 也就是相当于label被点击后让他们改变样式走到相应的位置 .wrap input:checked~.blob { background-color: #fff; color: #888; } .wrap input:checked~.blob:nth-of-type(1) { left: 100px; top: 35px; } .wrap input:checked~.blob:nth-of-type(2) { left: 65px; top: 85px; } .wrap input:checked~.blob:nth-of-type(3) { left: 15px; top: 120px; } .wrap input:checked~.blob:nth-of-type(4) { left: 180px; top: 45px; } .wrap input:checked~.blob:nth-of-type(5) { left: 160px; top: 100px; } .wrap input:checked~.blob:nth-of-type(6) { left: 120px; top: 145px; } .wrap input:checked~.blob:nth-of-type(7) { left: 70px; top: 180px; } .wrap input:checked~.blob:nth-of-type(8) { left: 15px; top: 200px; } 到此我们效果全部完成了,以下去全部源码↓ <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; } .wrap { position: relative; width: 230px; height: 250px; border: 1px solid red; margin: 50px auto; } .wrap label { position: absolute; left: 0px; top: 10px; width: 70px; height: 70px; background-color: #f44336; text-align: center; border-radius: 35px; /* font-size:0; */ line-height: 1; } .wrap label i { display: inline-block; width: 40px; height: 6px; background-color: #fff; border-radius: 4px; } .wrap input { display: none; } .wrap .blob { position: absolute; left: 10px; top: 10px; width: 50px; height: 50px; border-width: 0; background-color: #f44336; outline: none; font-size: 30px; border-radius: 25px; transition: 0.5s; } .wrap input:checked ~ .blob { background-color: #fff; color: #888; } .wrap input:checked ~ .blob:nth-of-type(1) { left: 100px; top: 35px; } .wrap input:checked ~ .blob:nth-of-type(2) { left: 65px; top: 85px; } .wrap input:checked ~ .blob:nth-of-type(3) { left: 15px; top: 120px; } .wrap input:checked ~ .blob:nth-of-type(4) { left: 180px; top: 45px; } .wrap input:checked ~ .blob:nth-of-type(5) { left: 160px; top: 100px; } .wrap input:checked ~ .blob:nth-of-type(6) { left: 120px; top: 145px; } .wrap input:checked ~ .blob:nth-of-type(7) { left: 70px; top: 180px; } .wrap input:checked ~ .blob:nth-of-type(8) { left: 15px; top: 200px; } </style> </head> <body> <div> <input type='checkbox' id='check' /> <button>★</button> <button>✉</button> <button>⚙</button> <button>✆</button> <button>✎</button> <button>♫</button> <button>✌</button> <button>❤</button> <label for='check'> <i></i> <i></i> <i></i> </label> </div> </body> </html>   |
|
|
