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

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

<!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>

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

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

Lin-UI Grid组件构建六宫格
Lin-UI Grid 组件构建六宫格 Lin-UI官网资料引入Lin-UI组件因为没有经过引入的Lin-UI组件是不能使用的,所以必须要在json文件中引入,但是一个组件在一个文件中需要使用就 ...
iOS仿探探六宫格相册的实现，带添加和删除功能
先看一下实现效果如下图: 具体实现代码如下: View视图的创建 #import <UIKit/UIKit.h> @protocol PhotoViewDelegate <NSObj ...
用html+js实现9宫格翻牌抽奖【建议收藏】
在前端浏览器页面,我们想实现抽奖的功能,铁子们可以朝这儿看齐,9个格子可以填写9份礼物,而且礼物可以控制位置,公司举办活动啥的直接就能用,方便实用: 1.效果展示 2.代码分享 <!DOCTYP ...
十六宫格拼图（A*/IDA*）（曼哈顿距离）
传送门迭代加深:通过单纯的深度优先搜索无法找出初始状态到最终状态的最短路径,但是重复进行限制最大深度的深度优先搜索(深度受限搜索)却可以.简单来说,就是在循环执行深度受限搜索的过程中逐步增加限制值l ...
给出vue写一个转盘抽奖页面
好的,下面是一种可能的方法来创建一个转盘抽奖页面: 在 HTML 文件中创建一个 div 元素作为转盘的容器. 在 CSS 文件中为转盘容器设置样式,包括大小.背景图片等. 在 Vue 组件中,使用 ...
IDA*算法解十六宫格拼图问题
IDA*算法, ID(Iterative Deepening)指的是迭代加深. 它的思想是重复进行限制最大深度的深度优先搜索(此限制从某个最小值遍历到最大值), 也称为深度受限搜索. 一般情况下, 为 ...
汉（海）明码 | “十六宫格法” 破解汉（海）明码相关题目（附软考经典例题）
文章目录一.前言二.奇偶校验码三.海明码概念四.十六宫格法 1.概述 2.原理 3.填写校验位 4.填写数据位 5.填写十六宫格首位五.结语一.前言很多小伙伴在遇到"汉明码&q ...
vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景:项目中用到1.4.6.9.12.16宫格排序,拖拽换位等场景,项目是监控的视频矩阵,用户矩阵拖拽排序换位,之前已经实现1.4.9.12.16等矩阵式排列的拖拽排序,但是六宫格要求五小一大,之前的 ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...

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

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

最新文章

热门文章