當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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套

??打卡文章更新?40??/? 100天

大家可以點贊、收藏、關注、評論我啦、需要完整文件隨時聯系我或交流喲~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于javaSpringboot+myb
下一篇： HTML+CSS+JS实现 ❤️ 宇宙星