CSS如何模仿遥控器按钮

这篇文章给大家分享的是有关CSS如何模仿遥控器按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

html结构

<view class="button-group">   <view class="outter-circle">     <view class="inner-parts brown" bindtap="button" data-type="volAdd">       <text class="rotate">+</text>     </view>     <view class="inner-parts silver" bindtap="button" data-type="chaAdd">       <text class="rotate">+</text>     </view>     <view class="inner-parts blue" bindtap="button" data-type="chaDes">       <text class="rotate">-</text>     </view>     <view class="inner-parts gold" bindtap="button" data-type="volDes">       <text class="rotate">-</text>     </view>     <view class="inner-circle" bindtap="button" data-type="ok">       <text class="ok rotate">ok</text>     </view>   </view> </view>

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如何模仿遥控器按钮”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！