Css如何优雅的实现抽奖转盘

news2024/12/24 2:08:18

在这里插入图片描述

如图，抽奖转盘，可以拆分为几部分：

1.底部大圆；
2.中间小圆；
3.扇形区；
4.扇形内部奖品区；
5.抽奖按钮；
6.点击抽奖按钮时旋转动效及逻辑；

这其中，扇形区，以及扇形区内奖品的布局最为关键和麻烦，这个问题解决，剩下的问题，那都不是事儿！

那如何用Css优雅的实现呢？——最关键的就是扇形区的绘制！

这里用到css的两个关键属性：rotate skewY；旋转和倾斜；

首先我们先来绘制一个扇形：

步骤：

1.先画一个圆形：

在这里插入图片描述

css代码：

.container {
	width: 300px;
	height: 300px;
	background-color: red;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

2.在圆形上，再画一个同大小的正方形，并将正方形左下角与圆心对齐，为了区分不同的区域，加上一个border：

在这里插入图片描述
css代码：

.prize-container {
	width: 280px;
	height: 280px;
	background-color: bisque;
	position: absolute;
	left: 50%;
	top: -50%;
	background-color: antiquewhite;
	border: 1px solid red;
}

3.关键点，如何通过skewY，将这个正方形倾斜：skew属性有skew，skewX，skewY，这里我们选择使用skewY，也就是顺着Y轴倾斜。通过上图，我们很容易想到，要想得到一个扇形，我们可以设置overflow: hidden，直接就能得到一个90°角的扇形：

在这里插入图片描述
但假如有6个奖品，那么每个奖品的扇形区就是360/6=60°。那如何将90°变为60°呢？上面我们说了，可以使用倾斜属性，即将正方形以左下角（圆心）为中心，向上提拉倾斜到夹角变为60°为止，上代码：

transform-origin: 0% 100%;
transform: skewY(-30deg);

在这里插入图片描述

首先我们要明白坐标系，以正方形为例，左上角为坐标原点（0，0），x轴往右为正，往左为负，y轴往下为正，往上为负，所以左下角坐标就是(0% ,100%)，transform-origin: 0% 100%即以左下角为中心倾斜；y轴向上为负，所以向上倾斜30°即transform: skewY(-30deg)。

4.总共6个奖品，那么就需要6个扇形区，上面我们已经得到了一个扇形模板，剩下的我们只需要使用rotate属性旋转对应角度即可，第一个不需要旋转，旋转角度为0，第二个需要旋转60°，第三个120°…最后得到的效果如图：

在这里插入图片描述
父布局加上overflow: hidden属性：

在这里插入图片描述

大功告成！

剩下的就是奖品内容区，这个比扇形区绘制更简单一点，只需要使用rotate属性即可：

.prize {
	width: 140px;
	height: 140px;
	position: absolute;
	left: 50%;
	top: 0;
	transform-origin: 0% 100%;
}
.prize-child {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(30deg) translateX(-15%) translateY(10%);
}

<div class="prize">
	<div class="prize-child">
		<div>奖品</div>
		<p>1等奖</p>
	</div>
</div>

我们设置一个长宽为圆形半径长度的正方形，在里面布局奖品内容，然后旋转30°即可，为什么要旋转30？因为内容是在扇形区的轴心，扇形区是60°，那么内容只需要旋转30°即可：

在这里插入图片描述
而translateX(-15%) translateY(10%)则是根据你的具体奖品内容布局，去调节显示位置的，这个不是固定的！

那6个奖品，就可以通过prize 旋转对应角度即可，原理同扇形区：

在这里插入图片描述

加上一个抽奖按钮，最终效果：

在这里插入图片描述

当然，可能实际情况并非正好固定6个奖品，也可能是8个，或其它数量，这个就需要你根据奖品个数，动态计算应该旋转的角度，旋转角度一般为：

扇形旋转角度：index360/count，
倾斜角度：index360/count-90
奖品旋转角度：index*360/count+360/count/2

index即奖品list的下标，count即奖品数量！

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>抽奖</title>
	</head>

	<style>
		.body {
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.container {
			width: 300px;
			height: 300px;
			background-color: red;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.turntable {
			width: 280px;
			height: 280px;
			border-radius: 50%;
			position: absolute;
			overflow: hidden;
		}

		/*扇形区*/
		.prize-container {
			width: 280px;
			height: 280px;
			background-color: bisque;
			position: absolute;
			left: 50%;
			top: -50%;
			/*600-280/2,将prize正方形左下角点对准圆心*/
			border: 1px solid red;
			/*以正方形左下角为中心旋转，0% 100%即左下角的坐标*/
			transform-origin: 0% 100%;
		}

		.prize-container:nth-child(1) {
			transform: rotate(0deg) skewY(-30deg);
		}

		.prize-container:nth-child(2) {
			transform: rotate(60deg) skewY(-30deg);
		}

		.prize-container:nth-child(3) {
			transform: rotate(120deg) skewY(-30deg);
		}

		.prize-container:nth-child(4) {
			transform: rotate(180deg) skewY(-30deg);
		}

		.prize-container:nth-child(5) {
			transform: rotate(240deg) skewY(-30deg);
		}

		.prize-container:nth-child(6) {
			transform: rotate(300deg) skewY(-30deg);
		}

		/* 奖品区 */
		.prize {
			width: 140px;
			height: 140px;
			position: absolute;
			left: 50%;
			top: 0;
			transform-origin: 0% 100%;
		}

		/* 奖品内容 */
		.prize-child {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transform: rotate(30deg) translateX(-15%) translateY(10%);
		}

		.prize:nth-child(1) {
			transform: rotate(0deg);
		}

		.prize:nth-child(2) {
			transform: rotate(60deg);
		}

		.prize:nth-child(3) {
			transform: rotate(120deg);
		}

		.prize:nth-child(4) {
			transform: rotate(180deg);
		}

		.prize:nth-child(5) {
			transform: rotate(240deg);
		}

		.prize:nth-child(6) {
			transform: rotate(300deg);
		}

		.draw-btn {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: red;
			color: white;
			font-size: 30px;
			line-height: 80px;
			text-align: center;
			position: absolute;
		}
	</style>

	<script>
		function drawPrize() {
			alert("抽奖");
		}
	</script>

	<body class="body">

		<div class="container">
			<div class="turntable">
				<div class="prize-container"></div>
				<div class="prize-container"></div>
				<div class="prize-container"></div>
				<div class="prize-container"></div>
				<div class="prize-container"></div>
				<div class="prize-container"></div>
			</div>

			<div class="turntable">
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>1等奖</p>
					</div>
				</div>
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>2等奖</p>
					</div>
				</div>
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>3等奖</p>
					</div>
				</div>
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>4等奖</p>
					</div>
				</div>
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>5等奖</p>
					</div>
				</div>
				<div class="prize">
					<div class="prize-child">
						<div>奖品</div>
						<p>6等奖</p>
					</div>
				</div>
			</div>

			<div class="draw-btn" onclick="drawPrize()">抽</div>
		</div>


	</body>


</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/464229.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

集成灶/小家电语音提示芯片方案-WTN6040-8S唯创知音自主研发

集成灶/小家电语音提示芯片方案-WTN6040-8S唯创知音自主研发

集成灶一直是厨房中常用设备之一&#xff0c;而现代技术的不断发展&#xff0c;为集成灶的升级提供了更多的可能性。深圳唯创知音为了让家用电器更加便民&#xff0c;专门为集成灶开发了一款语音IC方案——WTN6040语音芯片方案&#xff0c;这款芯片可以满足集成灶对语音提示功能…
阅读更多...
独家专访丨TheStage.ai ：当 AI 邂逅 Web3

独家专访丨TheStage.ai ：当 AI 邂逅 Web3

随着2022年末ChatGPT走红&#xff0c;AI再次成为人们关注的焦点。上一次AI掀起舆论热潮&#xff0c;还是2016年AlphaGo以4:1战胜世界顶级围棋棋手李世石。 但与上次不同的是&#xff0c;这次AI更强大了。在接受强化训练后&#xff0c;AI可以对用户的需求创造新内容。 面对AI的快…
阅读更多...
关于API数据接口的使用说明

关于API数据接口的使用说明

API&#xff08;Application Programming Interface&#xff09;是一种让不同软件之间进行数据交换和通信的技术&#xff0c;使用API可以减少开发者的工作量&#xff0c;提高软件应用的效率和可靠性。本文将介绍API数据接口的使用方式和注意事项。 使用API数据接口的方式&…
阅读更多...
Python一行代码实现文件共享【内网穿透公网访问】

Python一行代码实现文件共享【内网穿透公网访问】

目录 1. 前言 2. 视频教程 3. 本地文件服务器搭建 3.1 python的安装和设置 3.2 cpolar的安装和注册 4. 本地文件服务器的发布 4.1 Cpolar云端设置 4.2 Cpolar本地设置 5. 公网访问测试 6. 结语 转载自内网穿透工具的文章&#xff1a;Python一行代码实现文件共享【内网…
阅读更多...
PPOCRV3文本识别模型精度损失问题解决

PPOCRV3文本识别模型精度损失问题解决

PPOCRV3文本识别模型精度损失问题解决 1. 得到可用的ncnn模型2. 先看问题3. 快速解决4. 问题分析5. 最终效果6. 结语 1. 得到可用的ncnn模型 paddleocr文本识别模型(ch_PPOCRv3_rec_infer)转ncnn模型&#xff0c;我参考了这位大神的博客&#xff0c;基本包括了我遇到的所有问题…
阅读更多...
操作系统八股文知识点汇总

操作系统八股文知识点汇总

1. 程序编译过程 gcc HelloWorld.c -E -o HelloWorld.i 预处理&#xff1a;加入头文件&#xff0c;替换宏。gcc HelloWorld.c -S -c -o HelloWorld.s 编译&#xff1a;包含预处理&#xff0c;将 C 程序转换成汇编程序。gcc HelloWorld.c -c -o HelloWorld.o 汇编&#xff1a;包…
阅读更多...
在linux下搭建clash服务

在linux下搭建clash服务

下载clash并配置 clash安装包 一般下载名称中带clash-linux-amd64的包 下载完用gunzip解压&#xff0c;解压后重命名或者链接到系统环境变量目录都行 下载配置信息 wget -O config.yaml [订阅链接] wget -O Country.mmdb https://www.sub-speeder.com/client-download/Coun…
阅读更多...
深元边缘计算盒子在社区的应用，提高社区的安全性和生活质量

深元边缘计算盒子在社区的应用，提高社区的安全性和生活质量

近年来&#xff0c;随着人工智能技术的不断发展和普及&#xff0c;越来越多的社区开始应用边缘计算盒子AI视觉分析技术&#xff0c;以提高社区的安全性和管理效率。本文将介绍边缘计算盒子AI视觉分析技术在社区中的应用及其优势。 一、边缘计算盒子AI视觉在社区中的应用 1.安防…
阅读更多...
uniapp中实现自定义导航栏

uniapp中实现自定义导航栏

整个小程序默认配置存在系统内置导航和tabbar&#xff0c;项目中需求存在自定义的导航。 uniapp中vue封装组件&#xff08;顶部导航、底部tabbar&#xff09;&#xff0c;按照vue的相关语法使用。 在page.json文件中修改配置&#xff1a; 自定义导航组件&#xff1a; 给自定义…
阅读更多...
PLM听过很多遍，却依旧不知道是什么？看完这篇你就懂

PLM听过很多遍，却依旧不知道是什么？看完这篇你就懂

上周参加展会&#xff0c;很多客户在现场了解到e企拆图解决方案后&#xff0c;向我们咨询了很多问题&#xff0c;发现有几个名词经常被提及&#xff0c;比如PLM、PDM、BOM等。随着技术的爆炸发展&#xff0c;新的名词概念也与日俱增&#xff0c;对于这些名词&#xff0c;可能我…
阅读更多...
工贸企业重大事故隐患判定标准，自2023年5月15日起施行

工贸企业重大事故隐患判定标准，自2023年5月15日起施行

应急管理部发布了《工贸企业重大事故隐患判定标准》&#xff08;自2023年5月15日起施行&#xff09;&#xff0c;适用于判定冶金、有色、建材、机械、轻工、纺织、烟草、商贸等工贸企业重大事故隐患。新修改的安全生产法对建立健全重大事故隐患治理督办制度、督促生产经营单位消…
阅读更多...
关于ffmpeg的使用过程中遇到的点（php）

关于ffmpeg的使用过程中遇到的点（php）

有段日子没更新&#xff0c;最近使用ffmepg&#xff0c;这里记录一下 我这边就直说一下我工作中遇到的注意事项和使用方法&#xff0c;就不太详细说了 首先是安装的问题&#xff0c;windwos的话比较简单&#xff0c;官网下载安装文件&#xff0c;解压之后。设置环境变量 系统…
阅读更多...
【react全家桶学习】react中组件定义及state属性(超详/必看)

【react全家桶学习】react中组件定义及state属性(超详/必看)

函数式组件定义及特点 定义&#xff08;核心就是一个函数&#xff0c;返回虚拟dom&#xff09;&#xff1a; import React from reactexport default function index() {return <div>index</div> }特点&#xff1a; 1、适用于【简单组件】的定义2、是一个函数&a…
阅读更多...
【三维重建】NeRF原理+代码讲解

【三维重建】NeRF原理+代码讲解

文章目录 一、技术原理1.概览2.基于神经辐射场&#xff08;Neural Radiance Field&#xff09;的体素渲染算法3.体素渲染算法4.位置信息编码&#xff08;Positional encoding&#xff09;5.多层级体素采样 二、代码讲解1.数据读入2.创建nerf1.计算焦距focal与其他设置2.get_emb…
阅读更多...
1690_Python中的复数数据类型

1690_Python中的复数数据类型

全部学习汇总&#xff1a;GreyZhang/python_basic: My learning notes about python. (github.com) 之前总结的知识中设计的数据类型有整形、浮点、字符串等&#xff0c;这些类型表示的都是一个单独的独立数据对象。在Python有也有表示复数改变的数据类型&#xff0c;也就是下…
阅读更多...
Gradio入门到进阶全网最详细教程[二]：快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

Gradio入门到进阶全网最详细教程[二]：快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

常用的两款AI可视化交互应用比较&#xff1a; Gradio Gradio的优势在于易用性&#xff0c;代码结构相比Streamlit简单&#xff0c;只需简单定义输入和输出接口即可快速构建简单的交互页面&#xff0c;更轻松部署模型。适合场景相对简单&#xff0c;想要快速部署应用的开发者。 …
阅读更多...
千云物流 -测试服务器准备 -iotdb,redis

千云物流 -测试服务器准备 -iotdb,redis

服务器准备 准备CentOS-7-x86_64-DVD-2009.iso镜像 链接&#xff1a;https://pan.baidu.com/s/1rNkfoeHOuYv0OmitWVDNsQ?pwdjanl 提取码&#xff1a;janl 安装服务器需要的命令yum update yum install net-tools.x86_64 -y yum install zip unzip -y ## 安装jdk到当前机器&am…
阅读更多...
MySQL查看索引语句：SHOW INDEX 详细讲解

MySQL查看索引语句：SHOW INDEX 详细讲解

概述&#xff1a; SHOW INDEX语句是MySQL中用于查看表索引信息的语句。它提供了有关表中索引的详细信息&#xff0c;包括索引名称、索引类型、关联的列等。以下是SHOW INDEX的详细说明&#xff1a; 语法&#xff1a; SHOW INDEX FROM table_name [FROM db_name] [WHERE cond…
阅读更多...
python海龟库教学

python海龟库教学

海龟库&#xff1a; 海龟绘图 “小海龟”turtle是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff0c;(0,0)位置开始&#xff0c;它根据一组函数指令的控制&#xff0c;在这个平面坐标系中移动&…
阅读更多...
Visual Studio调试的10个技巧

Visual Studio调试的10个技巧

https://www.cnblogs.com/darrenji/p/3900023.html#e 本篇体验Visual Studio的10个调试技巧&#xff0c;包括&#xff1a; 1、插入断点和断点管理2、查看变量信息3、逐语句F11&#xff0c;逐过程F10&#xff0c;跳出ShiftF114、查看堆栈信息5、设置下一条执行语句6、调试时修改…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023