我们需要两个素材,一个是下面的转盘背景图片,一个是指针图片.图片素材如下:
转盘背景
转盘指针
上面的两张素材被微博图床自动转换为了JPG图片.我们在做的时候,可以管设计要两个类似的设计...结构没什么复杂的.下面我们来写css.
sass代码
注意:
1. 本文CSS部分使用SASS撰写.如果你对SASS不了解,请参考我的博文《CSS预编译技术之SASS学习经验小结》,
2....本文默认引用我之前写的resert.scss和mixin.scss两个文件.一个是浏览器重置代码,一个是常用代码片混入代码.请在此获取《移动端系列博文基础reset.scss和mixin.scss》...为了便于大家理解,我将布局和表现,拆开来写.实际项目中,应该是整合在一起的.....它的情况,如下图所示:
布局示例图
如上图所示,我们的8个.prize就都是那个黑色半透明的区域.全部定位到这里了.重叠显示.