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

短命女 2022-09-10 07:17 264阅读 0赞

> ##   效果演示：   ##
> 
> ![20210906141846711.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分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>
        
        <script src="./js/jquery-1.7.2.min.js"></script>
        <script src="./js/lottery.js"></script>
        <script src="./js/awardRotate.js"></script>
    </body>
    
    </html>

> ## 源码获取 ##
> 
> 查看博主主页或私信博主获取
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新** 40  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210906141846711.gif]: /images/20220829/1b7d1523d7cb4b0f90928ede31f0ad46.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/4b0ceeec4c3344e482e265e5c90709b5.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/3c8978f69a4540269cc4cab3f970d3f5.png