.wrap { width:60px; height:30px; background-color:#ccc; border-radius:16px; position:relative; transition:0.3s } .circle { width:29px; height:29px; background-color:#fff; border-radius:50%; position:absolute; left:0px; transition:0.3s; box-shadow:0px 1px 5px rgba(0,0,0,.5); } .circle:hover { transform:scale(1.2); box-shadow:0px 1px 8px rgba(0,0,0,.5); }
按钮仅用到两个div,非常简单。jq添加点击事件,获取到的left要转换为数值才能赋值;