jQuery实现花式轮播之圣诞节礼物传送效果

旋转出发，旋转到达。鼠标经过停止，点击拆礼物！

          写的比较简单，喜欢点赞收藏哦。

          请在谷歌等高版本浏览器打开^-^

  
  
  
    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
     }
    .cr{
      width: 100%;
      position: relative;
      background: url("http://cdn.attach.qdfuns.com/notes/pics/201612/15/174106gbm3famm0piq62mm.png") no-repeat 0 0;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      overflow: hidden;
    }
    .cr-l,.cr-r{
      position: absolute;
      bottom:10%;
      width: 20.8%;
      height: 70%;
      z-index:100;
    }
    .cr-l img,.cr-r img{
      width: 100%;
      position: absolute;
      top:50%;
    }
    .cr-l{
      left: 0;
    }
    .cr-r{
      right:0;
    }
    .cr-icon{
      bottom: 15%;
      left:0;
      position: absolute;
      z-index: 1000;
      width: 100%;
      height: 70%;
      text-align: center;
    }
    .cr-icon img{
      margin-right: 25px;
      width: 10%;
      vertical-align: top;
      position: absolute;
      bottom: 0;
      opacity: 1;
      transform:rotate(0deg);
      transition: all 1s;
    }
    .cr-icon img:first-child{
      transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg);
      opacity: 0;
      width: 0;
    }
    .cr-icon img:last-child{
      transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      opacity: 0;
      width: 0;
    }
  


  
    
    
      
 
 
 
 
 
      
    
    
  
  
  

效果图如下所示：

以上所述是小编给大家介绍的jQuery实现花式轮播之圣诞节礼物传送效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！