圖1
圖2
圖3
就愛UI - 分享UI設計的點點滴滴
注本頭條號,專注做前端
轉盤抽獎這個在我們平時的前端項目中用到還挺多,用html5+canvas的方式來做我認為是最好的,支持移動端,今天分享的這個就是基于 html5+canvas實現,并且我還用到過幾次。
中獎概率,中獎提示,可抽獎次數,旋轉角度等等,都可以配置,非常實用
//
下是一個簡單的國慶風格的活動抽獎頁面的示例代碼。頁面中有一個醒目的十一標志,以及一些國慶相關的元素和活動信息。
html復制代碼
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>國慶抽獎活動</title> | |
<style> | |
body { | |
background-color: #f2f2f2; | |
font-family: Arial, sans-serif; | |
text-align: center; | |
} | |
.container { | |
max-width: 600px; | |
margin: 0 auto; | |
padding: 20px; | |
} | |
.logo { | |
width: 200px; | |
height: 200px; | |
background-image: url('path/to/logo.png'); | |
background-size: cover; | |
margin: 0 auto; | |
display: block; | |
} | |
.prizes { | |
list-style-type: none; | |
padding: 0; | |
} | |
.prize { | |
margin-bottom: 20px; | |
} | |
.prize-item { | |
font-weight: bold; | |
} | |
.button { | |
display: inline-block; | |
background-color: #ff0000; | |
color: #fff; | |
text-align: center; | |
padding: 10px 20px; | |
margin: 10px 2px; | |
cursor: pointer; | |
border: none; | |
border-radius: 5px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="logo"></div> | |
<h1>國慶抽獎活動</h1> | |
<p>歡慶國慶,贏取豐厚獎品!</p> | |
<ul class="prizes"> | |
<li class="prize"> | |
<div class="prize-item">iPhone 13</div> | |
<div class="prize-item">價值 6999 元</div> | |
</li> | |
<li class="prize"> | |
<div class="prize-item">Kindle Paperwhite</div> | |
<div class="prize-item">價值 1299 元</div> | |
</li> | |
<li class="prize"> | |
<div class="prize-item">國慶紀念品</div> | |
<div class="prize-item">價值 50 元</div> | |
</li> | |
</ul> | |
<a href="#" class="button">立即參與</a> | |
</div> | |
</body> | |
</html> |
*請認真填寫需求信息,我們會在24小時內與您取得聯系。