您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“CSS怎么實(shí)現(xiàn)遙控器按鈕功能”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS怎么實(shí)現(xiàn)遙控器按鈕功能”吧!
html結(jié)構(gòu)
<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); }
注:文字區(qū)域若不inline-block,旋轉(zhuǎn)屬性將不生效!
按鈕點(diǎn)擊事件
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的基本語法是:
1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成;
2、選擇器通常是需要改變樣式的HTML元素;
3、每條聲明由一個(gè)屬性和一個(gè)值組成;
4、屬性和屬性值被冒號(hào)分隔開。
到此,相信大家對(duì)“CSS怎么實(shí)現(xiàn)遙控器按鈕功能”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。