CSS怎么实现遥控器按钮功能

本篇内容主要讲解“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的基本语法是什么

css的基本语法是：

1、css规则由选择器和一条或多条声明两个部分构成；

2、选择器通常是需要改变样式的HTML元素；

3、每条声明由一个属性和一个值组成；

4、属性和属性值被冒号分隔开。

到此，相信大家对“CSS怎么实现遥控器按钮功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！