关闭

css3实现抽奖装盘效果

标签: css3transition抽奖转盘
313人阅读 评论(0) 收藏 举报

演示如下:



代码如下:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
<title>无标题文档</title>
<style>
   #main{
    display: block;
    padding:30px;
   }

   #triangle{
    position: absolute;
    left: 78px;
    top: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid blue;
   }

   canvas{
    transition: all 3s;
   }

   #tip{
    font-size: 30px;
    color: blue;
    margin:15px 0; 
   }

   #result{
    font-size: 30px;
    color: red;
    margin:15px 0; 
   }
</style>
</head>    
<body>
<div id="main">
   <div id="triangle"></div>
   <canvas id="mycanvas" width="100" height="100"></canvas>
   <div id="tip">点击装盘开始抽奖</div>
   <div id="result"></div>
</div>
<script type="text/javascript">
  var canvas=document.getElementById('mycanvas');
  var ctx=canvas.getContext('2d');
  ctx.fillStyle="red";
  ctx.arc(50,50,50,0,2*Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(50,0);
  ctx.lineTo(50,100);
  ctx.moveTo(0,50);
  ctx.lineTo(100,50);
  ctx.stroke();
  ctx.closePath();
  ctx.fillStyle="black";
  ctx.font="14px Georgia";
  ctx.fillText("手机",20,30);
  ctx.fillText("电脑",60,30);
  ctx.fillText("美女",20,70);
  ctx.fillText("汽车",60,70);

  var result=document.getElementById('result');
  canvas.onclick=function(){
     var deg=Math.random()*360+720;
     canvas.style.transform="rotate("+deg+"deg)";
     setTimeout(showResult,3100);
     function showResult(){
      if(deg-720<90){
        result.innerHTML="恭喜你抽到了手机";
      }else if(deg-720>=90&°-720<180){
        result.innerHTML="恭喜你抽到了美女";
      }else if(deg-720>=180&°-720<270){
        result.innerHTML="恭喜你抽到了汽车";
      }else if(deg-720>=270){
        result.innerHTML="恭喜你抽到了电脑";
      }
    }
  }

</script>
</body>
</html>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS3编写抽奖效果

抽奖 *{margin: 0;padding: 0;} body{font-family: "Microsoft YaHei";} .box{...
  • Summer_water
  • Summer_water
  • 2017-06-08 14:23
  • 331

JavaScript 实现跑马灯抽奖效果

实现效果如图:代码如下: js跑马灯抽奖效果 *{ margin: 0; padding: 0; font-size:12px; } body{ backgro...
  • chen_gong1992
  • chen_gong1992
  • 2016-11-22 13:52
  • 752

JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)

最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕...
  • as66t
  • as66t
  • 2013-11-04 18:03
  • 33379

纯CSS3实现真实翻书效果

研读以下代码及其注释,让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容
  • b954960630
  • b954960630
  • 2016-12-02 13:36
  • 1448

使用CSS3实现翻书效果(二)

原来一直使用QQ直接登录的博客,今天绑定了一下邮箱,原来的博客全没了,只好把原来备份的博文重新发了一下,还好只有两篇~         昨天把css3实现翻书样式的效果实现了大半,今天将其主体的样式...
  • srk19960903
  • srk19960903
  • 2017-03-27 16:39
  • 279

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。
  • actorWen
  • actorWen
  • 2017-12-14 10:09
  • 162

CSS3做涟漪的效果

涟漪的效果 @keyframes myfirst { from {border:0 solid #E4684D; left:1px;top: 1px;} to {border:12px s...
  • learninginJAVA
  • learninginJAVA
  • 2015-04-24 14:31
  • 2154

Unity幸运转轮 实现

现如今很多的游戏都有幸运转轮活动,有的是特效按顺序一次播放形成旋转效果(如王者荣耀),有的是转动轮盘或者指针,这里讲的是后一种(如图)。
  • qq_33337811
  • qq_33337811
  • 2017-02-08 11:04
  • 519

利用CSS3实现图片切换特效

利用label标签和:checked,并使用到了transform和transition属性。实现简单,相比JS而言,非常方便,且效果更佳,有兴趣可以拷贝代码,修改图片路径,运行看看效果。 ...
  • liuyan19891230
  • liuyan19891230
  • 2016-02-21 14:33
  • 6925

用css3实现简单的进入效果

这是一个比较简单的小例子,实现如图效果 仅仅用css3就可以达到这种效果,代码如下: .div { position: relative; top: 20px; h...
  • sangjinchao
  • sangjinchao
  • 2017-03-31 20:22
  • 790
    个人资料
    • 访问:8615次
    • 积分:260
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:8篇
    • 评论:0条
    文章存档