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="data: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大作业实战100套

打卡文章更新 40 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

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

js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: @import url("https://fonts.googleapis.com/css?family=Quicksand:400,5 ...
HTML+CSS+JS实现 ❤️响应式团队❤️
效果演示: 代码目录: 主要代码实现: CSS样式: body {margin: 0;min-height: 100vh;display: flex;justify-content: center;a ...
基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...

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

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

HTML代码 :

源码获取

HTML5大作业实战100套

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

最新文章

热门文章