抽奖动画效果html,利用css实现一个抽奖动画效果

首先我们先来看下最终的运行效果：

从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。

这个效果基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。

具体步骤如下：

首先画一个转盘

幸运大转盘

/* 重置默认样式 */

* {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.wrapper {

position: relative;

height: 200px;

width: 200px;

padding: 20px;

margin: 20px;

background-color: #c0381f;

box-shadow: #000000 0px 0px 10px;

border-radius: 50%;

}

.panel {

position: relative;

height: 200px;

width: 200px;

background-color: #b7b7b7;

border-radius: 100px;

}

.pointer {

position: absolute;

left: 79px;

top: 79px;

z-index: 10;

height: 30px;

width: 30px;

padding: 6px;

color: #fff899;

line-height: 15px;

font-size: 12px;

text-align: center;

background-color: #dc5b5b;

border-radius: 50%;

border: 1px solid #c0381f;

}

开始抽奖

效果如下，配色什么的不要在意，可能比较丑。。。

然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。

如图，矩形是由四个三角形边框组成的，只要设置其它边颜色为透明，就可以获得单独的三角形。

这里通过伪元素after实现三角形，并通过绝对定位将三角形定位到中间小圆的顶端。.pointer::after {

content: '';

position: absolute;

left: 14px;

top: -24px;

border-width: 12px 6px;

border-style: solid;

border-color: transparent;

border-bottom-color: #c0381f;

}

现在才像一个指针了。

接下来是实现转盘背景，不同的扇区对应不同的奖品，这样就有一个需求：实现任意角度扇形。

可能会想当然的认为和三角形一样，不过是加一个border-radius而已，高度是圆半径，宽度是tan(θ/2)，但是实现出来的效果和想象并不一样……(可能需要做一些其他操作以达到效果，但是我没想到。

最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了，qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

实现就是通过两个正方形取相交区域。

我觉图画的还是挺好的:D

没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =

Document

.sector {

position: absolute;

width: 100px;

height: 200px;

margin: 100px;

border-radius: 0px 100px 100px 0;

overflow: hidden;

transform: rotate(-18deg);

}

.sector-inner {

text-align: center;

display: block;

width: 40px;

padding: 5px 3px 0 57px;

height: 195px;

background: #ffeab1;

transform: translateX(-100px) rotate(36deg);

transform-origin: right center;

border-radius: 100px 0 0 100px;

}

.sector-inner span {

display: block;

transform-origin: center;

transform: rotate(-19deg);

color: #d46854;

}

谢谢参与

效果如下，一个带有文字的小扇形~~

OK，现在写一堆扇形放到一开始的转盘上。

现在的代码是酱紫滴~~太长了折起来。

幸运大转盘

/* 重置默认样式 */

* {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.wrapper {

position: relative;

height: 200px;

width: 200px;

padding: 20px;

margin: 20px;

background-color: #c0381f;

box-shadow: #000000 0px 0px 10px;

border-radius: 50%;

}

.panel {

position: relative;

height: 200px;

width: 200px;

background-color: #b7b7b7;

border-radius: 100px;

}

.sector {

position: absolute;

width: 100px;

height: 200px;