CSS怎么模仿遥控器按钮

这篇文章主要讲解了"CSS怎么模仿遥控器按钮"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"CSS怎么模仿遥控器按钮"吧！

html结构

            +              +              -              -              ok      

css样式

.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);}

注：文字区域若不inline-block，旋转属性将不生效！

按钮点击事件

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')    }  }

运行效果

感谢各位的阅读，以上就是"CSS怎么模仿遥控器按钮"的内容了，经过本文的学习后，相信大家对CSS怎么模仿遥控器按钮这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！