HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
??效果演示：??
代碼目錄：
主要代碼實現(xiàn)：
部分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>源碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業(yè)實戰(zhàn)100套
??打卡 文章 更新?40??/? 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時聯(lián)系我或交流喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于javaSpringboot+myb
- 下一篇： 工业互联网智能智造-工业企业大数据汇聚通