css3抽奖转盘,从零制作css3抽奖大转盘 -凯发ag旗舰厅登录网址下载

今天的任务是做一个纯css3的还算比较漂亮的抽奖大转盘，也就是下图效果。

我只说思路和重要的css3代码。

paste_image.png

外盘

外盘是指有彩灯的深橙色圆环，以及圆环的外边线。

外盘设一个div.lottery-box作为容器，border-radius为50%，边框厚度为20px，颜色就是深橙色。外边线的浅橙色，用box-shadow: 0px 0px 0 4px #febd04;来实现。

彩灯

html方面，用 div.lottery-box>ul.illumination>li*24 构建。illumination就是彩灯的意思。也就是说我们弄24个li作为24盏灯。

css方面：

1、.illumination需要声明list-style: none;以及高度值。它的li的css先保证所有li位于ul的正中央，然后做成圆形：

display: block;

width: 8px;

height: 8px;

background: #fff;

position: absolute;

top: 50%;

left: 50%;

margin: -4px 0 0 -4px;

border-radius: 4px;

2、然后要用到transform: rotate(0deg) translatey(-136px);，原理是让彩灯li远离初始位置136px，然后每个彩灯都有不同的旋转角度。居顶的灯就是0deg，右侧的第一个灯就是15deg，然后是30deg，类推下去。这样大家就形成了一圈彩灯。

3、加闪烁动画。我设了一个四关键帧的动画，总是就是一顿乱闪。填充色先是白色，后是黄色，光圈也变来变去。

@keyframes twinkling{

0%{

background: #fefdfc;

border: 1px solid #fefdfc;

}

25%{

background: #fefdfc;

border: none;

box-shadow: 0px 0px 0 2px #eb6f21;

}

75%{

background: #fefe00;

border: 1px solid #fefe00;

}

100%{

background: #fefe00;

border: none;

box-shadow: 0px 0px 0 2px #eb6f21;

}

}

给li整体设上animation: twinkling 1.2s infinite ease-in-out;，1.2秒一个周期。

然后，用:nth-child()选择器给每个li设不同的角度值。

.illumination li:nth-child(1) {

-webkit-transform: rotate(0deg) translatey(-136px);

-moz-transform: rotate(0deg) translatey(-136px);

transform: rotate(0deg) translatey(-136px);

animation-delay: .6s;

}

然后，奇数li都设上animation-delay: .6s;，这样才是交错闪烁。

到此，彩灯完成。

扇面

扇面更有意思，比彩灯的知识还冷僻一些。

html方面：新建ul.lottery-sector作为ul.illumination的兄弟元素，然后里面六个li作为扇区。

css方面：

1、容器css如下，保证它是圆形的就行了。

.lottery-sector {

list-style: none;

width: 250px;

height: 250px;

position: absolute;

overflow: hidden;

top: 0;

border-radius: 50%;

border: 4px solid #febd04;

}

2、li的css是关键。原理就两句：transform-origin: 100% 100%;transform: rotate(0deg) skew(30deg);也就是以右下角为变形中心，先旋转，然后倾斜。比如第一个li(就是左上角的那个扇区)，旋转角度是0也就是不旋转，然后倾斜30度，这样它就向左倾斜了30度，形成了平行四边形，这个四边形的右下角的角度就是——60度。到此，第一个li成了一个平行四边形，其中有用的部分就是它的右下角。虽然它是平行四边形，但是被ul一裁剪，就形成了一个扇形。这就是我们最终要的扇形。第二个li也是一样的道理，也是要它的扇形，只不过它旋转了60度。

.lottery-sector li {

margin: 0;

width: 125px;

height: 125px;

position: absolute;

transform-origin: 100% 100%;

}

.lottery-sector li:nth-child(1) {

background-color: #fefefe;

transform: rotate(0deg) skew(30deg);

}

.lottery-sector li:nth-child(2) {

background-color: #fff0d0;

transform: rotate(60deg) skew(30deg);

}

.lottery-sector li:nth-child(3) {

background-color: #fefefe;

transform: rotate(120deg) skew(30deg);

}

/* 还有三个li从略 */

奖品名称

html方面，新建ul.lottery-gift作为ul.sector的兄弟元素，然后里面六个li作为扇区。

css方面，原理是在li中正常写字和放图，比如

理财金
100元，然后分别做定位和旋转，即可。

.lottery-gift {

list-style: none;

width: 250px;

height: 250px;

position: absolute;

top: 0;

}

.lottery-gift li {

position: absolute;

display: block;

margin: 0;

width: 125px;

height: 125px;

color: #f44336;

font-size: 14px;

line-height: 1.4;

font-weight: bold;

text-align: center;

list-style: none;

}

.lottery-gift li:nth-child(1) {

top: 28px;

transform: rotate(300deg);

}

.lottery-gift li:nth-child(2) {

top: -11px;

left: 65px;

}

.lottery-gift li:nth-child(3) {

top: 28px;

left: 127px;

transform: rotate(60deg);

}

指针

指针你可以做一张图，也可以继续用css3来制作。指针分成两部分：一个尖角，和一个圆盘。

1、尖角的做法，设宽高为0，只用border去形成：

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

2、圆盘的做法跟上文彩灯的原理是一样的：

彩灯的圆环以及毛边，用一个div来做；

“点击抽奖”的深色背景，和亮黄色的环，用另一个div来做。

指针旋转动画

理论上应该由js库来操纵旋转，因为这涉及到概率计算的问题。如果非要纯css3来控制旋转，可以是：

1、关键帧：0%是0deg，100%是360deg，先让指针匀速的转动，然后js向后台发送请求，等待服务器返回是否中奖。只要没有返回，就一直一圈又一圈的转。

2、当服务器返回结果，其结果最好是旋转角度，也就是说，到底是停到那个扇区，假定停到30度，那么我们计算一个角度数值，就是1800 30，也就是再旋转1830度就停，为什么要有1800呢？因为你要让指针慢慢停啊！这个值需要js动态生成，所以这就是麻烦所在，需要js动态生成@keyframes。可以写一段css插入dom。

3、这个1830度，可以设animation: zhuanzhuanzhuan 4s forwards ease-in-out;，其中forwards表示停在最终一帧，ease-in-out表示先慢后快最后慢。

谢谢大家观看。

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的css3抽奖转盘,从零制作css3抽奖大转盘的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。