效果图：
所需图片素材：
这张图是pointer.png的位置的。
turntable-bg.jpg这张是转盘背景图，在背景位置。
这张是turntable.png位置的。
需要这三张图片，如果要实现一下，直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字，放到同一个文件下。
基本原理：
1，通过设置CSS样式的position属性，z-index属性等实现背景图，转盘图与指针图的层叠摆放；
2，通过设置元素style.transform = "rotate(0deg)"实现旋转效果。
完整代码如下：
1
2
3
4
5
6
7
转盘抽奖效果
8
9
10 #bg{
11 width:650px;
12 height:600px;
13 margin:0 auto;
14 background:url(turntable-bg.jpg) no-repeat;
15 position:relative;
16 }
17
18 img[src^="pointer"]{
19 position:absolute;
20 z-index:10;
21 top:155px;
22 left:247px;
23 }
24
25 img[src^="turntable"]{
26 position:absolute;
27 z-index:5;
28 top:60px;
29 left:116px;
30 transition:all 4s;
31 }
32
33
34
35
36
