所以,本文,是讲,如何实现CSS布一个大转盘的局.
所要的效果.以及对应的图片资源
如上图所示,我们要实现这样的一个大转盘效果.顶上的标题栏和滚动文字,以及下面的提示,不是本文的重点,请自动忽略....我们需要两个素材,一个是下面的转盘背景图片,一个是指针图片.图片素材如下:
转盘背景
转盘指针
上面的两张素材被微博图床自动转换为了JPG图片.我们在做的时候,可以管设计要两个类似的设计...span {display: block;margin-top: 0.5rem;}
}
}
}
如上,在移动端的分辨率,最小是iphone5s的320宽....而最大,一般是iphone6plus的414宽.如果将大转盘做成自适应的,也不是不可以,只是稍嫌麻烦.因此,我决定做成固定宽度,在最小的上面也可以,在最大的上面,也不过分....font-size: 62.5%;}也就是说,1rem 相当于 10px
因此,我将总的宽度,设置为280px 因此,.turntable则为一个280*280的矩形,并且居中.
.pointer是指针,但是,它不是一个正方形
云服务器
ICP备案
腾讯会议
云直播
对象存储
