注:本demo在小程序环境中测试,其他h5,pc网页通用,只需将小程序单位和标签名改成通用的即可,并按照自己的需求做适配即可。
大体思路:四个相同的正方形田字形布局,配合旋转属性即可。
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模仿遥控器按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
?导语 | 传统HADOOP生态系统使用YARN管理/调度计算资源,该系统?般具有明显的资...
简介: 数字化转型是信息技术与产业的结合。需要转型的不仅仅是各个传统的产业,...
前言 人心中的成见是一座大山,任你怎么努力都休想搬动。 这是电影《哪吒》里申...
前言 好久没有更新了,最近忙着面试,写毕业设计和论文。 不过不想停下记笔记的...
下面一段代码给大家介绍了html5添加禁止缩放功能,具体代码如下所示: meta name...
cn 域名注册 费用多少? .cn域名 的注册价格原价是38元/年,有促销活动的话,可...
css table 之1px边框单元格--尊托云数 尊托云数 尊托云数 尊托云数 尊托云数 尊...
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等...
看到一些网站的页中大部分是这样写的 style type="text/css" media="screen" @im...
WML 页面通常称为 \"deck\"。每个 deck 含有一系列的 card。card 元素可包含文本...