Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

## home page for free source code

​

Code directory:

​

Main code implementation:

Partial CSS styles:

.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/[email protected]") 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%; }Copy the code

HTML code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta charset="utf-8"> <meta name="viewport" The content = "width = device - width, initial - scale = 1.0, the 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"> Sorry! Browser not supported. </canvas> <button id="tupBtn" class="turnplatw_btn"> <img src="images/[email protected]" class="turnplatw_img"> <div class="goIcon"></div> </button> </div> </div> <! - the current page 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>Copy the code

The source code for

View the main page of the blogger to obtain

Clocked articles updated 40/100 days

You can like, collect, pay attention to, comment on me, need to complete the document at any time contact me or exchange yo ~!

​

​