Html + CSS + JS implémentation ️ Responsive Lucky Turnover ️ [with full source Sharing]

Java Li Yang Yong 2021-10-13 20:33:18
html css js impl mentation


​​Petite connaissance,Grand défi!Cet article participe「Les programmeurs ont besoin de peu de connaissances」Activités créatives​

   Démonstration des effets:  ## Accès gratuit au code source

Répertoire des codes:

Principales implémentations de code:

SectionCSSStyles:

.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)
}
/* Grand style de carrousel */
.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%;
}
Copier le Code

HTMLCode :

<!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">Je suis désolé.!Le navigateur ne supporte pas.</canvas>
<button id="tupBtn" class="turnplatw_btn">
<img src="images/guding@2x.png" class="turnplatw_img">
<div class="goIcon"></div>
</button>
</div>
</div>
<!--Page actuellejs-->
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/lottery.js"></script>
<script src="./js/awardRotate.js"></script>
</body>
</html>
Copier le Code

Accès au code source

Voir la page d'accueil du blogueur

  Frappe. Article (s) Mise à jour 40 /  100Oh, mon Dieu.

Tout le monde peut- Oui.、Collection、Attention、CommentairesC'est moi. 、Besoin de documents complets n'hésitez pas à me contacter ou à communiquer yo~!

Insérer la description de l'image ici

版权声明
本文为[Java Li Yang Yong]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013203316027W.html

  1. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  2. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  3. 使用elementui在完成项目中遇到的未知知识点2
  4. On the mechanism of webpack loader
  5. 云原生体系下 Serverless 弹性探索与实践
  6. vue开发技巧
  7. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  8. 致敬!再见了!LayUI !
  9. Vue安装和卸载
  10. Implement a flipped character with the transform attribute of CSS
  11. 你的第一个 Docker + React + Express 全栈应用
  12. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  13. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  14. 前端技巧-JS元编程ES6 symbol公开符号
  15. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  16. 前端推荐!10分钟带你了解Konva运行原理
  17. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  18. 零基础学习Web前端需要注意什么呢?
  19. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  20. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  21. JavaScript数组 几个常用方法
  22. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?
  23. 暢談this的四種綁定方式
  24. 2021最新Vue面试必胜宝典,大厂面试题解析!
  25. Quatre façons de lier ceci
  26. Préparation au développement de l'extension tagdown
  27. Intervieweur: Parlez - moi des flotteurs CSS
  28. Packaging the View Component Library with rollup
  29. Comment un composant enfant modifie les valeurs passées par le composant parent
  30. Résumé de l'API Express
  31. Optimisation de la structure du Code if else dans le projet
  32. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  33. 新手学前端的方法是什么 自学前端该怎么规划
  34. 云原生体系下 Serverless 弹性探索与实践
  35. 如何全方位打造安全高效的HTTPS站点(一)
  36. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  37. 从理念到LRU算法实现,起底未来React异步开发方式
  38. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  39. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  40. 云原生体系下 Serverless 弹性探索与实践
  41. 初学者怎么学Web前端?
  42. react
  43. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  44. JavaScript数组 几个常用方法
  45. Angular 依赖注入 - 全面解析
  46. html_day02
  47. 那些年我们前端面试中经常被问到的题!
  48. The starting price of Ducati multistada V2 in North America is less than 100000 yuan
  49. Hls.js 使用文檔
  50. Hls.js travailler avec des documents
  51. Problèmes liés à la précision JS
  52. Copie une partie des propriétés d'un objet à un autre objet
  53. Multiplexage de modules en vuex
  54. Développement multilingue Android, questions d'entrevue pour le développement de logiciels Android
  55. Chen lushai and her best friend Wang Meng play video, fearless of the pressure of public opinion, and in a good mood to dance in a bare back
  56. # Sass速通(四):继承、混合与函数
  57. Vidéo de développement de combat Android, questions d'entrevue rxjava
  58. Bugatti Chiron maintenance cost exposure! One piece for one car, burn money endlessly
  59. android应用开发基础答案,深入理解Nginx
  60. 做了三年前端,你才知道10分钟就能实现一个PC版魔方游戏