HTML六宫格转盘抽奖页面设计，选项区块为自定义文字

冷不防 2022-06-02 03:11 217阅读 0赞

本文演示一个六宫格抽奖的事例，网上也有很多模板，不过背景都是一整张图片，无法自定义内容，本文就给出可以自定义文字内容的的抽奖页面。

<!DOCTYPE html>
    <html slick-uniqueid="4">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .g-content {
            width: 100%;
            background: #fbe3cc;
            height: auto;
            font-family: "微软雅黑", "microsoft yahei";
        }
        .g-content .g-lottery-case {
            width: 500px;
            height: 445px;
            margin: 0 auto;
            overflow: hidden;
        }
    
        .g-content .g-lottery-case .g-left h2 {
            font-size: 20px;
            line-height: 32px;
            font-weight: normal;
            margin-left: 20px;
        }
    
        .g-content .g-lottery-case .g-left {
            width: 450px;
            float: left;
        }
    
    
    
        .g-lottery-box {
            width: 400px;
            height: 400px;
            margin-left: 30%;
            position: relative;
            background: url(http://115.29.55.209/link/images/ly-plate-c.gif) no-repeat;
        }
    
        .g-lottery-box .g-lottery-img {
            width: 340px;
            height: 340px;
            position: relative;
            background: url(http://115.29.55.209/link/images/bg_lottery_6.png) no-repeat;
            left: 30px;
            top: 30px;
        }
    
        .g-lottery-box .playbtn {
            width: 186px;
            height: 186px;
            position: absolute;
            top: 77px;
            left: 77px;
            background: url(http://115.29.55.209/link/images/playbtn.png) no-repeat;
        }
    
        .lotter-wrap .title {
            position: relative;
            color: #6d2512;
            text-align: center;
            margin-bottom: 100px;
        }
        .lotter-wrap{
            padding-bottom: 100px;
        }
    
        .itemsDiv{
            position: absolute;
            margin-left: 130px;
            margin-top: 40px;
            transition: unset;
            transform: rotate(30deg);
    		font-size: 10px;
        }
    
        .itemsDiv div{
            text-align: center;
            display: inline-block;
            position: fixed;
            font-size: 1.5em;
            min-width: 100px;
            min-height: 100px;
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            overflow: hidden;
            -webkit-transition: border .3s ease;
            -moz-transition: border .3s ease;
            transition: border .3s ease;
        }
    
        .itemsDiv div:first-child {
            -webkit-transform: rotateZ(330deg);
            -ms-transform:rotateZ(330deg);
            -moz-transform: rotateZ(330deg);
            transform: rotateZ(330deg);
            margin-left: 30px;
            margin-top: -50px;
    
        }
    
        .itemsDiv div:nth-child(2) {
            -webkit-transform: rotateZ(390deg);
            -ms-transform:rotateZ(390deg);
            -moz-transform: rotateZ(390deg);
            transform: rotateZ(390deg);
            margin-left: 60px;
    
        }
        .itemsDiv div:nth-child(3) {
            -webkit-transform: rotateZ(90deg);
            -ms-transform: rotateZ(90deg);
            -moz-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
            margin-left: 30px;
            margin-top: 40px;
    
        }
        .itemsDiv div:nth-child(4) {
            -webkit-transform: rotateZ(150deg);
            -ms-transform: rotateZ(150deg);
            -moz-transform: rotateZ(150deg);
            transform: rotateZ(150deg);
            margin-left: -30px;
            margin-top: 40px;
        }
        .itemsDiv div:nth-child(5) {
            -webkit-transform: rotateZ(-150deg);
            -ms-transform: rotateZ(-150deg);
            -moz-transform: rotateZ(-150deg);
            transform: rotateZ(-150deg);
            margin-left: -60px;
            margin-top: -10px;
        }
        .itemsDiv div:nth-child(6) {
            -webkit-transform: rotateZ(270deg);
            -ms-transform:rotateZ(270deg);
            -moz-transform: rotateZ(270deg);
            transform: rotateZ(270deg);
            margin-left: -25px;
            margin-top: -55px;
        }
    
        #demo{
            overflow:hidden;
            height:50px;
            width:435px;
            margin: 0px 45px;
            position:relative;
        }
        #demo1{
            height:auto;
            text-align:left;
        }
        #demo2{
            height:auto;
            text-align:left;
        }
        #demo1 li{
            list-style-type:none;
            height:22px;
            text-align:left;
            text-indent:15px;
        }
        #demo2 li{
            list-style-type:none;
            height:22px;
            text-align:left;
            text-indent:15px;
        }
    
        .lotter-wrap .prize-result {
            padding: 15px 0;
            background: #fff8c2;
            border-radius: 5px;
            text-align: center;
        }
    </style>
    </head>
    <body>
    	<div class="lotter-wrap">
    		<section class="title">
    			<h1><span class="title-before">六宫格</span><span class="title-after">抽奖活动</span></h1>
    			<p class="dirscript"></p>
    		</section>
    		<section class="lotter-content clearfix">
    			<div class="prize-box">
    				
    				<div class="banner">
    					<div class="turnplate">
    
    						<h2 style="display:none;">您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
    						<div class="g-lottery-box">
    							<div class="g-lottery-img">
    								<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
    								<div class="itemsDiv">
    									<div>感谢你的参与</div>
    									<div>组合优惠券</div>
    									<div>全场10元优惠券</div>
    									<div>满688元减188元券</div>
    									<div>满1380减100元券</div>
    									<div>满1100元减60元券</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		<section>
    	</div>
    </body>
    </html>

**每天进步一点点，更多精彩内容，欢迎关注公众号“编程社”！！！**

![1.jpg][]

[1.jpg]: /images/20220602/24ee6c1d88174a4b807f61bd595e3098.png