抽奖跑马灯

最近做了一个春节活动,里面有个抽奖活动,做一个跑马灯效果,示例如下
抽奖跑马灯_第1张图片

html代码

  • 20云豆
  • 50云豆
  • 100云豆
  • 抽 奖
  • 已 抽 奖
  • 1000云豆
  • 2000云豆
  • 5000云豆
  • 10000云豆
  • 20000云豆

css代码

.lottery .lottery-ul{position:relative;width:360px;height:360px;margin:0;padding:0;float:left;background:#ffeabc;}
.lottery .lottery-ul li {width:120px;height:120px;line-height:90px;color:#ff5152;;text-align:center;list-style-type: none;}
.lottery .lottery-ul li .beans{color:#ff5152;;font-size:20px;font-weight:bold;}
.lottery .lottery-ul li.lottery-unit-1{position:absolute;top:0;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-2{position:absolute;top:0;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-3{position:absolute;top:0;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-4{position:absolute;top:120px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-5{position:absolute;top:240px;left:240px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-6{position:absolute;top:240px;left:120px;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-7{position:absolute;top:240px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg1.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-unit-8{position:absolute;top:120px;left:0;background:url("http://www.sinacloud.com/static/special/image/lottery_bg2.png") 0 0 no-repeat;}
.lottery .lottery-ul li.active{
    background:url("http://www.sinacloud.com/static/special/image/lottery_bg_active.png") 0 0 no-repeat;}
.lottery .lottery-ul li.lottery-btn{position:absolute;top:120px;left:120px;width:120px;height:120px;background:#ffeabc;}
.lottery .lottery-ul li.lottery-btn a{display:inline-block;width:120px;height:120px;line-height:120px;text-align:center;font-size:30px;color:#fff;text-decoration:none;background:#fe8145;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.lottery .lottery-ul li.has-lottery a{padding:0;border:none;}
.hide{display:none;}

js代码



你可能感兴趣的:(抽奖跑马灯)