张家界公司网站建设,做导航网站不侵权吗,房屋网签查询系统官方网站,新城镇建设官方网站如图#xff0c;抽奖转盘#xff0c;可以拆分为几部分#xff1a;
1.底部大圆#xff1b; 2.中间小圆#xff1b; 3.扇形区#xff1b; 4.扇形内部奖品区#xff1b; 5.抽奖按钮#xff1b; 6.点击抽奖按钮时旋转动效及逻辑#xff1b;
这其中#xff0c;扇形区抽奖转盘可以拆分为几部分
1.底部大圆 2.中间小圆 3.扇形区 4.扇形内部奖品区 5.抽奖按钮 6.点击抽奖按钮时旋转动效及逻辑
这其中扇形区以及扇形区内奖品的布局最为关键和麻烦这个问题解决剩下的问题那都不是事儿
那如何用Css优雅的实现呢——最关键的就是扇形区的绘制
这里用到css的两个关键属性rotate skewY旋转和倾斜
首先我们先来绘制一个扇形
步骤
1.先画一个圆形 css代码
.container {width: 300px;height: 300px;background-color: red;border-radius: 50%;display: flex;justify-content: center;align-items: center;position: relative;
}2.在圆形上再画一个同大小的正方形并将正方形左下角与圆心对齐为了区分不同的区域加上一个border css代码
.prize-container {width: 280px;height: 280px;background-color: bisque;position: absolute;left: 50%;top: -50%;background-color: antiquewhite;border: 1px solid red;
}3.关键点如何通过skewY将这个正方形倾斜skew属性有skewskewXskewY这里我们选择使用skewY也就是顺着Y轴倾斜。通过上图我们很容易想到要想得到一个扇形我们可以设置overflow: hidden直接就能得到一个90°角的扇形 但假如有6个奖品那么每个奖品的扇形区就是360/660°。那如何将90°变为60°呢上面我们说了可以使用倾斜属性即将正方形以左下角圆心为中心向上提拉倾斜到夹角变为60°为止上代码
transform-origin: 0% 100%;
transform: skewY(-30deg);首先我们要明白坐标系以正方形为例左上角为坐标原点00x轴往右为正往左为负y轴往下为正往上为负所以左下角坐标就是(0% ,100%)transform-origin: 0% 100%即以左下角为中心倾斜y轴向上为负所以向上倾斜30°即transform: skewY(-30deg)。
4.总共6个奖品那么就需要6个扇形区上面我们已经得到了一个扇形模板剩下的我们只需要使用rotate属性旋转对应角度即可第一个不需要旋转旋转角度为0第二个需要旋转60°第三个120°…最后得到的效果如图 父布局加上overflow: hidden属性 大功告成
剩下的就是奖品内容区这个比扇形区绘制更简单一点只需要使用rotate属性即可
.prize {width: 140px;height: 140px;position: absolute;left: 50%;top: 0;transform-origin: 0% 100%;
}
.prize-child {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;transform: rotate(30deg) translateX(-15%) translateY(10%);
}div classprizediv classprize-childdiv奖品/divp1等奖/p/div
/div我们设置一个长宽为圆形半径长度的正方形在里面布局奖品内容然后旋转30°即可为什么要旋转30因为内容是在扇形区的轴心扇形区是60°那么内容只需要旋转30°即可 而translateX(-15%) translateY(10%)则是根据你的具体奖品内容布局去调节显示位置的这个不是固定的
那6个奖品就可以通过prize 旋转对应角度即可原理同扇形区 加上一个抽奖按钮最终效果 当然可能实际情况并非正好固定6个奖品也可能是8个或其它数量这个就需要你根据奖品个数动态计算应该旋转的角度旋转角度一般为
扇形旋转角度index360/count 倾斜角度index360/count-90 奖品旋转角度index*360/count360/count/2
index即奖品list的下标count即奖品数量
完整代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title抽奖/title/headstyle.body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;}.container {width: 300px;height: 300px;background-color: red;border-radius: 50%;display: flex;justify-content: center;align-items: center;position: relative;}.turntable {width: 280px;height: 280px;border-radius: 50%;position: absolute;overflow: hidden;}/*扇形区*/.prize-container {width: 280px;height: 280px;background-color: bisque;position: absolute;left: 50%;top: -50%;/*600-280/2,将prize正方形左下角点对准圆心*/border: 1px solid red;/*以正方形左下角为中心旋转0% 100%即左下角的坐标*/transform-origin: 0% 100%;}.prize-container:nth-child(1) {transform: rotate(0deg) skewY(-30deg);}.prize-container:nth-child(2) {transform: rotate(60deg) skewY(-30deg);}.prize-container:nth-child(3) {transform: rotate(120deg) skewY(-30deg);}.prize-container:nth-child(4) {transform: rotate(180deg) skewY(-30deg);}.prize-container:nth-child(5) {transform: rotate(240deg) skewY(-30deg);}.prize-container:nth-child(6) {transform: rotate(300deg) skewY(-30deg);}/* 奖品区 */.prize {width: 140px;height: 140px;position: absolute;left: 50%;top: 0;transform-origin: 0% 100%;}/* 奖品内容 */.prize-child {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;transform: rotate(30deg) translateX(-15%) translateY(10%);}.prize:nth-child(1) {transform: rotate(0deg);}.prize:nth-child(2) {transform: rotate(60deg);}.prize:nth-child(3) {transform: rotate(120deg);}.prize:nth-child(4) {transform: rotate(180deg);}.prize:nth-child(5) {transform: rotate(240deg);}.prize:nth-child(6) {transform: rotate(300deg);}.draw-btn {width: 80px;height: 80px;border-radius: 50%;background-color: red;color: white;font-size: 30px;line-height: 80px;text-align: center;position: absolute;}/stylescriptfunction drawPrize() {alert(抽奖);}/scriptbody classbodydiv classcontainerdiv classturntablediv classprize-container/divdiv classprize-container/divdiv classprize-container/divdiv classprize-container/divdiv classprize-container/divdiv classprize-container/div/divdiv classturntablediv classprizediv classprize-childdiv奖品/divp1等奖/p/div/divdiv classprizediv classprize-childdiv奖品/divp2等奖/p/div/divdiv classprizediv classprize-childdiv奖品/divp3等奖/p/div/divdiv classprizediv classprize-childdiv奖品/divp4等奖/p/div/divdiv classprizediv classprize-childdiv奖品/divp5等奖/p/div/divdiv classprizediv classprize-childdiv奖品/divp6等奖/p/div/div/divdiv classdraw-btn onclickdrawPrize()抽/div/div/body/html
