HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

.winnerBox {max-width: 40rem;padding: 30px;margin: 30px auto;/*height: calc(100vh - 98px);*//*background-color: #fd6504 #9470fd;*/background: linear-gradient(to bottom right, #fd6504, #9470fd)
}/* 大转盘样式 */.turnplate_box {width: 100%;background: url("../images/zhuanp@2x.png") no-repeat;background-size: 100% 100%;position: relative;border-radius: 50%;overflow: hidden;
}.turnplate_box canvas {margin: 7.5%;width: calc(100% - 15%);height: calc(100% - 15%);/*position: absolute;*/border-radius: 50%;z-index: 10;flex-shrink: 0;
}#myCanvas {background-color: white;border-radius: 100%;/*transition: transform 6s;*/-o-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;overflow: hidden;
}.turnplatw_btn {width: 30%;height: 35%;left: 35%;top: 30.5%;border-radius: 100%;position: absolute;cursor: pointer;border: none;background: transparent;outline: none;z-index: 40;
}.turnplatw_img {width: 100%;position: absolute;top: 0;left: 0;
}.goIcon {color: #fff;font-weight: 800;position: absolute;margin-right: auto;margin-left: auto;background: url("../images/go.png") no-repeat;background-size: 100% 100%;top: 25%;width: 50%;height: 50%;text-align: center;left: 25%;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover"><meta name="screen-orientation" content="portrait" /><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./css/lottery.css"><title>proDraw</title>
</head>
<style>
</style><body><div class='winnerBox'><div class="turnplate_box"><canvas id="myCanvas" width="260px" height="260px">抱歉！浏览器不支持。</canvas><button id="tupBtn" class="turnplatw_btn"><img src="images/guding@2x.png" class="turnplatw_img"><div class="goIcon"></div></button></div></div><!--当前页js--><script src="./js/jquery-1.7.2.min.js"></script><script src="./js/lottery.js"></script><script src="./js/awardRotate.js"></script>
</body></html>