CSS模仿遥控器按钮JS+CSS3实现提交按钮发送信封动画特效源码CSS3实现的多组创意互动式开关切换按钮动画特效源码CSS使用classList实现两个按钮样式的切换css3点击按钮水波纹气泡动画特效源码CSS3美化单选/复选/开关按钮样式特效源码CSS3实现单选和多选按钮美化样式特效源码纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化CSS3鼠标hover按钮过渡动画特效

++--ok

 .button-group { padding-top: 20rpx; width: 300rpx; height: 300rpx; background-color: pink; } .outter-circle { position: relative; margin-left: 10rpx; width: 280rpx; height: 280rpx; background-color: lightcyan; border-radius: 100%; overflow: hidden; transform-origin: center; transform: rotate(45deg); } .inner-parts { float: left; width: 140rpx; height: 140rpx; line-height: 140rpx; text-align: center; } .silver { background-color: silver; } .gold { background-color: gold; } .blue { background-color: blue; } .brown { background-color: brown; } .inner-circle { position: absolute; margin-top: 70rpx; margin-left: 70rpx; width: 140rpx; height: 140rpx; line-height: 140rpx; text-align: center; border-radius: 100%; background-color: lightblue; } .rotate { display: inline-block; transform: rotate(-45deg); }

 button: function(e) { var buttonType = e.currentTarget.dataset.type console.log(buttonType) switch (buttonType) { case 'chaAdd': console.log('backward the channel') break case 'chaDes': console.log('forward the channel') break case 'volAdd': console.log('strengthen the volumn') break case 'volDes': console.log('weaken the volumn') break default: console.log('ok') } }