css 遥控器界面,CSS模仿遥控器按钮

注：本demo在小程序环境中测试，其他h5，pc网站公用，只需将小程序单位和标签名改成公用的就行了，并按照自己的需求做适配就行了。

大体思路：四个相同的正方形田字形布局，配合旋转属性就行了。

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;