demo1：

1.通过设置CSS样式的position属性，z-index属性等实现背景图，转盘图与指针图的层叠摆放；

2、通过设置元素style.transform = "rotate(0deg)"实现旋转效果；

代码：

　　运行效果：点击抽奖转盘旋转

 素材：

 

demo2：

涉及知识点：

贝塞尔曲线

cubic-bezier还是比较少用到，PC端中，有浏览器不兼容。但是手机端中，可以使用并带来炫酷的动画及体验。

• 缓动函数速查表： 
• Ceaser： 
• cubic-bezier：

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1];

在CSS3中，常用的几个动画效果，用cubic-bezier表示分别为：

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)ease-out: cubic-bezier(0, 0, 0.58, 1.0)ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

CSS3中，动画属性为transition，常用动画如下：

  .demo2{

        top: 100px;

          -webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);

          transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);

    }

代码：

	
     		
     	
     	
     					
     
            
      
                
       
                            RMB100                
       
                
       
                            流量100M                
       
                
       
                            谢谢参与                
       
            
      
            
      
                
       
                            再接再厉                
       
                
       
                            开始                    
        
                    
        
                
       
                
       
                            RMB2                
       
            
      
            
      
                
       
                            RMB100                
       
                
       
                            谢谢参与                
       
                
       
                            流量100M                
       
            
      
        
     
	

　　

 

 素材链接：  链接：https://pan.baidu.com/s/1W_PVCQkZTWMx3M_KrrfPhQ 密码：1nwq