web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录
- 前言
- 1、html部分
- 2、css部分
- 3、JavaScript部分
- 4、微信小程序演示
前言
哈哈
1、html部分
<div class="great_ultimate_eight_diagrams_box"><div class="eight_diagrams_box"><div class="eight_diagrams"><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">天乾</div><div class="direction">正南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">风巽</div><div class="direction">西南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">水坎</div><div class="direction">正西</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">山艮</div><div class="direction">西北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">地坤</div><div class="direction">正北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">雷震</div><div class="direction">东北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">火离</div><div class="direction">正东</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">泽兑</div><div class="direction">东南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div></div></div><!-- 太极 --><div class="great_ultimate_box"><div class="great_ultimate"></div></div></div>
☺☺☺☺☺☺☺
关于
html
结构未做优化,望谅解!不过微信小程的代码已经优化好,有需要的伙伴可以私聊。对于页面结构就不做过多阐述,多看几下就明白了咋回事了。
2、css部分
.great_ultimate_eight_diagrams_box {display: flex;justify-content: center;align-items: center;animation: circularRotation linear infinite 30s;
}/* 八卦 */
.eight_diagrams_box {position: relative;
}.eight_diagrams {width: 410px;height: 410px;position: relative;display: flex;justify-content: center;align-items: center;
}.eight_diagrams_item {width: 100px;position: absolute;
}.yin_yang {width: 100%;height: 100%;text-align: center;
}.divinatory_name {/* 文字两端对齐 */text-align-last: justify;font-size: 20px;font-weight: 700;padding: 0 20px;
}.direction {margin-top: 2px;text-align-last: justify;padding: 0 10px;
}.yy_box {margin-top: 10px;display: flex;flex-direction: column;align-items: center;
}.yy_t,
.yy_m,
.yy_b {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0;margin: 0;
}.yy_m {margin-top: 8px;
}.yy_b {margin-top: 8px;
}.yy_t div,
.yy_m div,
.yy_b div {width: 100%;height: 8px;
}/* 太极 */
.great_ultimate_box {position: absolute;
}.great_ultimate {width: 270px;height: 270px;border-radius: 50%;/* 圆球上半部分为白色,下半部分为黑色 */background: linear-gradient(to bottom,#ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);position: relative;transform: rotate(-90deg);
}.great_ultimate::before {position: absolute;content: "";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #000000;/* 左侧黑球套白点 */background-color: #FFFFFF;left: 0;top: 50%;transform: translateY(-50%);
}.great_ultimate::after {position: absolute;content: "";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #FFFFFF;/* 右侧白球套黑点 */background-color: #000000;right: 0;top: 50%;transform: translateY(-50%);
}@keyframes circularRotation {form {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
☺☺☺☺☺☺☺
八卦图主要就是使用定位,通过
JavaScript
计算每一个div
的坐标,然后定位到指定位置即可。关于太极图可查看本篇文章了解详情。
3、JavaScript部分
function init() {let elItem = document.querySelectorAll('.eight_diagrams_item'),yin_yang = document.querySelectorAll('.yin_yang'),radius = document.querySelector('.eight_diagrams').clientWidth / 2,itemLen = elItem.length,pieceDeg = 360 / itemLen;for (let i = 0; i < itemLen; i++) {let t = i * pieceDeg,x = undefined,y = undefined;yin_yang[i].style.transform = `rotate(${t}deg)`;t = (Math.PI / 180) * t;x = Math.sin(t) * radius;y = -Math.cos(t) * radius;elItem[i].style.transform = `translate(${x}px, ${y}px)`;}
}init();
☺☺☺☺☺☺
定义名为
init
的函数,用来设置旋转元素的坐标。
通过querySelectorAll
获取一个元素类数组。
通过querySelector
和clientWidth
获取外层容器的宽度并除以2
得到半径。
通过querySelectorAll
获取内层元素的类数组,并使用yin_yang
变量保存。
定义itemLen
变量保存类数组长度。
通过类数组长度计算元素角度的平均值,并保存到pieceDeg
变量中。
使用for
循环计算出每个元素的x
和y
坐标,i * pieceDeg
得到角度值;(Math.PI / 180) * t
得到弧度值,因为编程中的sin
和cos
需要通过弧度才能计算出坐标值。
yin_yang[i].style.transform = 'rotate(' + t + 'deg)'
;
elItem[i].style.transform = 'translate(' + x + 'px', y + 'px)'
;
第一句代码设置元素的旋转角度;第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现,但是在这里暂时不优化。
4、微信小程序演示
相关文章:

web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分 <div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…...

【LeetCode】33. 搜索旋转排序数组、1290. 二进制链表转整数
作者:小卢 专栏:《Leetcode》 喜欢的话:世间因为少年的挺身而出,而更加瑰丽。 ——《人民日报》 目录 33. 搜索旋转排序数组 1290. 二进制链表转整数 33. 搜索旋转排序数组 33. 搜索旋转排序…...

IBM Semeru Windows 下的安装 JDK 17
要搞清楚下载那个版本,请参考文章:来聊聊 OpenJDK 和 JVM 虚拟机下载地址semeru 有认证版和非认证版,主要是因为和 OpenJ9 的关系和操作系统的关系而使用不同的许可证罢了,本质代码是一样的。在 Windows 下没有认证版,…...

Lambda表达式和steram流
目录 引言: 语法: Lambda 表达式实例: demo演示: Stream流: 引言: Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性。 Lambda 允许把函数作为一个方法的参数(函…...

面试必会-MySQL篇
1. Mysql查询语句的书写顺序Select [distinct ] <字段名称>from 表1 [ <join类型> join 表2 on <join条件> ]where <where条件>group by <字段>having <having条件>order by <排序字段>limit <起始偏移量,行数>2. Mysql查询语…...

Hadoop入门常见面试题与集群时间同步操作
目录 一,常用端口号 Hadoop3.x : Hadoop2.x: 二,常用配置文件: Hadoop3.x: Hadoop2.x: 集群时间同步: 时间服务器配置(必须root用户): (1)…...
JS 数组去重的方法
// 数组去重 const arr ["1", "1", "2", "3", "5", "3", "1", "5", "4"] console.log(this.deduplicate(arr)) // [1, 2, 3, 5, 4] // 数组对象去重 const arr [ { id: 1, nam…...

PMP项目管理项目沟通管理
目录1 项目沟通管理2 规划沟通管理3 管理沟通4 监督沟通1 项目沟通管理 项目沟通管理包括通过开发工件,以及执行用于有效交换信息的各种活动,来确保项目及其相关方的信息需求得以满足的各个过程。项目沟通管理由两个部分组成:第一部分是制定…...

2.JVM常识之 运行时数据区
1.JVM核心组成 2.JVM 运行时数据区(jdk8) 程序计数器:线程私有,当前线程所执行字节码的行号指示器 jvm栈:线程私有,Java 虚拟机栈为 JVM 执行 Java 方法服务 本地方法栈:线程私有,本…...

你的游戏帐号是如何被盗的
据报道,2022上半年,中国游戏市场用户规模达到了5.54亿人,游戏市场销售收入1163.1亿元,相较去年均为同比增长的情况。如此庞大的市场规模,黑色产业链是绕不开的话题。 但相较于游戏中大家常见的玩家与玩家、玩家与官方…...

C++11异步编程
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言1、std::future和std::shared_future1.1 std:future1.2 std::shared_future2、std::async3、std::promise4、std::packaged_task前言 C11提供了异步操作相关的类…...
20230310----重返学习-DOM元素的操作-时间对象-定时器
day-024-twenty-four-20230310-DOM元素的操作-时间对象-定时器 复习 获取元素 id document.getElementById() 类名 document.getElementsByClassName() 标签名 document.getElementsByTagName() name属性 document.getElementsByName() 选择器 document.querySelector()docum…...

江苏专转本转本人后悔排行榜
江苏专转本转本人后悔排行榜 一、复习的太迟: 后悔指数:五颗星。 复习越到最后,时间一天天变少,要复习的内容还有很多,很多人都后悔没有早早开始,总想着多给我两月一定会考上的。 担心时间不够用,那就努力利…...

【算法时间复杂度】学习记录
最近开算法课,开几篇文章记录一下算法的学习过程。 关于算法的重要性 学习计算机当程序员的话,在编程过程中是绕不开算法这个大矿山的,需要我们慢慢挖掘宝藏。 算法(Algorithm)是指用来操作数据、解决程序问题的一组…...
汽车车机芯片Linux系统内核编译问题总结
谈到车机,很多人会想到华为问界上装的大屏车机,号称车机的天花板,基于鸿蒙OS的,而今天谈到的车机芯片用的是linux内核Kernel,对于它的编译,很多人一时会觉得头大,的确如果工具不是很齐全,就会遇到这样那样的问题,但是过程都会有错误提示,按照错误提示基本可以解决,而…...
Android13 音量曲线调整
Android13 音量曲线调整 Android13 上配置文件的路径: /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/system/etc/audio_engine_config/audio_policy_engine_stream_volumes.xml /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/sys…...

OpenHarmony通过MQTT连接 “改版后的华为IoT平台”
一、前言 本篇文章我们使用的是BearPi-HM_Nano开发板:小熊派的主板+E53_IA1扩展板 源码用的是D6_iot_cloud_oc,点击下载BearPi-HM_Nano全量源码 那么为什么要写这篇呢? 前段时间看到OpenHarmony群里,经常有小伙伴问接入华为IoT平台的问题,他们无法正常连接到华为IoT平台等…...

SQS (Simple Queue Service)简介
mazon Simple Queue Service (SQS)是一种完全托管的消息队列服务,可以让你分离和扩展微服务、分布式系统和无服务应用程序。 在讲解SQS之前,首先让我们了解一下什么是消息队列。 消息队列 还是举一个电商的例子,一个用户在电商网站下单后付…...
高速PCB设计指南系列(三)
第一篇 高密度(HD)电路的设计 本文介绍,许多人把芯片规模的BGA封装看作是由便携式电子产品所需的空间限制的一个可行的解决方案,它同时满足这些产品更高功能与性能的要求。为便携式产品的高密度电路设计应该为装配工艺…...

【C++】C++11——左右值|右值引用|移动语义|完美转发
文章目录一、左值与右值1.概念2.引用3.注意二、右值引用的意义1.左值引用意义2.右值引用和移动语义3.容器新增三、万能引用四、完美转发一、左值与右值 1.概念 左值是什么?右值是什么? 左值是一个表示数据的表达式(如变量名或解引用的指针&…...

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...

C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...

云安全与网络安全:核心区别与协同作用解析
在数字化转型的浪潮中,云安全与网络安全作为信息安全的两大支柱,常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异,并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全:聚焦于保…...