当前位置：首页 > news >正文

CSS太极动态图

news 2025/10/16 21:19:05

CSS太极动态图

1. 案例效果

我们今天学习用HTML和CSS实现动态的太极，看一下效果。

QQ录屏20240205103407 -original-original

2. 分析思路

太极图是由两个旋转的圆组成，一个是黑圆，一个是白圆。实现现原理是使用CSS的动画和渐变背景属性。
首先，为所有元素设置默认值为0，以消除margin和padding影响。
```
* {margin: 0;padding: 0;box-sizing: border-box;
}
```

然后，将整个页面设置为100%的视口高度，使用flex布局使元素水平垂直居中。

body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: wheat;
}

接下来，创建一个名为taiji的容器，包含两个子元素，一个是::after，另一个是::before。这两个子元素分别表示上方的黑圆和下方的白圆。

利用渐变背景属性设置基本的太极图，这里的旋转角度需要设置90度。

background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 50%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 1) 90%
);

两个小圆也用背景渐变属性设置，就能得到太极图。

/* 上方的圆球 */	
background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 25%,rgba(0, 0, 0, 1) 25%,rgba(0, 0, 0, 1) 100%
);

 /* 下方的圆球 */
background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 100%
);

让太极图动起来，设置animation动画。

@keyframes taiji-auto {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}

animation: taiji-auto 4s linear infinite;

3. 完整代码

3.1 html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>太极动态图</title><link rel="stylesheet" href="./style.css" /></head><body><div class="taiji"></div></body>
</html>

3.2 css文件

* {margin: 0;padding: 0;box-sizing: border-box;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: wheat;
}@keyframes taiji-auto {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}/* 太极圆的容器 */
.taiji {position: relative;width: 300px;height: 300px;border-radius: 50%;border: 1px solid #ccc;margin: 300px auto;/* 渐变色：左黑右白 */background: rgb(0, 0, 0);background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 50%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 1) 90%);animation: taiji-auto 4s linear infinite;overflow: hidden;
}/* 上方的圆球 */
.taiji::after {content: "";width: 150px;height: 150px;border-radius: 50%;position: absolute;left: 50%;top: 0;transform: translateX(-50%);background-color: #000;/* 渐变色 */background: rgb(255, 255, 255);background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 25%,rgba(0, 0, 0, 1) 25%,rgba(0, 0, 0, 1) 100%);
}/* 下方的圆球 */
.taiji::before {content: "";width: 150px;height: 150px;border-radius: 50%;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);background: rgb(0, 0, 0);background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 100%);
}

CSS太极动态图

CSS太极动态图 1. 案例效果我们今天学习用HTML和CSS实现动态的太极，看一下效果。 2. 分析思路太极图是由两个旋转的圆组成，一个是黑圆，一个是白圆。实现现原理是使用CSS的动画和渐变背景属性。首先，为所有元素设置默认值为0…...

编程日记 2024/2/11 18:57:35

TI毫米波雷达开发——High Accuracy Demo 串口数据接收及TLV协议解析 matlab 源码

TI毫米波雷达开发——串口数据接收及TLV协议解析 matlab 源码前置基础源代码功能说明功能演示视频文件结构01.bin / 02.binParseData.mread_file_and_plot_object_location.mread_serial_port_and_plot_object_location.m函数解析configureSport(comportSnum)readUartCallback…...

编程日记 2024/2/11 18:52:29

基于tomcat运行jenkins常见的报错处理

目录 1.jenkins.util.SystemProperties$Listener错误升级jdk11可能遇到的坑 2.java.lang.RuntimeException: Fontconfig head is null, check your fonts or fonts configuration 3.There were errors checking the update sites: UnknownHostException:updates.jenkins.i…...

编程日记 2024/2/11 18:51:28

算法学习——LeetCode力扣二叉树篇1

算法学习——LeetCode力扣二叉树篇1 144. 二叉树的前序遍历 144. 二叉树的前序遍历 - 力扣（LeetCode） 描述给你二叉树的根节点 root ，返回它节点值的前序遍历。示例示例 1： 输入：root [1,null,2,3] 输出&a…...

编程日记 2024/2/11 18:36:12

二叉树的遍历及创建

typedef char T;struct TreeNode {T _data;TreeNode* left;TreeNode* right; }; 1、二叉树的遍历---DFS 3 5 6 …...

编程日记 2024/2/11 18:33:09

图形学：Transform矩阵（3维 2维）平移，旋转，缩放

0. 简介在图形学领域中，Transform矩阵（变换矩阵）是一种表示图形对象在二维或三维空间中的位置、方向和大小变化的数学工具。它们用于执行各种图形变换，如平移、旋转、缩放。Transform矩阵通常表示为一个二维或三维矩阵&#xff…...

编程日记 2024/2/11 18:32:07

Docker学习历程

Docker学习历程 Q1、docker还没启动Q2、Docker容器名称冲突的问题Q3：启动minio时发现，容器已经再重启Q4：容器被占用的情况Q5：查看日志 Q1、docker还没启动 docker run --env MODEstandalone --name nacos --restartalways -d -p …...

编程日记 2024/2/11 18:29:05

Android:Volley框架使用

3.15 Volley框架使用 Volley框架主要作为网络请求，图片加载工具。当应用数据量小、网络请求频繁，可以使用Volley框架。框架Github地址：https://github.com/google/volley Volley框架的简单使用，创建项目Pro_VolleyDemo。将Github上下载Volley框架源代码，volley-master.zi…...

编程日记 2024/2/11 18:18:55

前端修炼手册（uniapp的api篇）

一、页面相关API uni.navigateTo 该API用于跳转到应用内的某个页面，可以传递参数。 uni.navigateTo({url: /pages/detail/detail?id1 })uni.redirectTo 该API用于关闭当前页面并跳转到应用内的某个页面，可以传递参数。 uni.redirectTo({url: /pages/…...

编程日记 2024/2/11 18:15:52

JAVA面试题16

什么是Java中的反射机制？它的用途是什么？ 答案：Java的反射机制是指在运行时，通过获取类的信息来操作类的属性、方法和构造函数等。它可以用来创建对象、调用方法，以及实现动态代理等功能。什么是Java中的泛型&#x…...

编程日记 2024/2/11 18:13:50

P1044 [NOIP2003 普及组] 栈题解

题目有一个单端封闭的管子，将N(1<N<18)个不同的小球按顺序放入管子的一端。在将小球放入管子的过程中也可以将管子最顶上的一个或者多个小球倒出来。请问：倒出来的方法总数有多少种？ 输入输出格式输入格式输入文件只含一个整数n…...

编程日记 2024/2/11 18:11:49

【DSP】数字信号处理发展里程碑（AI【文心一言】辅助生成）

在远离尘嚣的学术殿堂中，数字信号处理（DSP）这一学科犹如一颗璀璨的明珠，其发展历程充满了传奇色彩。下面，就让我们一起穿越时空，回到那些激动人心的时刻，见证数字信号处理从无到有、从弱到强的壮…...

编程日记 2024/2/11 18:10:48

【JavaScript 】finally() 方法和Filter() 方法

JavaScript 中的finally() 方法 finally是 JavaScript 构造中使用的方法try-catch。try它在and阻塞之后执行catch，无论 Promise 是已履行还是已拒绝。该函数的主要作用是执行必要的清理任务并向用户传达消息。一个常见的用例可能是通知用户“您的请求已被处理”&am…...

编程日记 2024/2/11 18:09:47

假期作业8

线程和进程服务器线程 #include <myhead.h>#define SIP "192.168.0.114" #define SPORT 8888void *task(void *arg){printf("客户端连接\n");sleep(1);pthread_exit(NULL); }int main(int argc, const char *argv[]) {int sfd socket(AF_INET, S…...

编程日记 2024/2/11 18:06:44

基于vue+node.js的校园跳蚤市场系统多商家

校园跳蚤市场系统可以在短时间内完成大量的数据处理、帮助用户快速的查找校园跳蚤市场相关信息，实现的效益更加直观。校园跳蚤市场系统中采用nodejs技术和mysql数据库。主要包括管理员、发布者和用户三大部分，主要功能是实现对个人中心、用户管理、发布者…...

编程日记 2024/2/11 18:05:42

Linux操作系统基础（六）：Linux常见命令（一）

文章目录 Linux常见命令一、命令结构二、ls命令三、cd命令四、mkdir命令五、touch命令六、rm命令七、cp命令八、mv命令九、cat命令十、more命令 Linux常见命令一、命令结构 command [-options] [parameter]说明: command : 命令名, 相应功能的英文单词…...

编程日记 2024/2/11 18:04:41

【Android-Compose】Material3 新版下拉刷新 PullRefresh

这里写自定义目录标题 1、（新）用于 Jetpack Compose 的刷新指示器1.1 SwipeRefresh 迁移到新的 PullRefresh1.2 迁移步骤1.3 自定义指示器 2、原始文档（SwipeRefresh ）的使用依赖导入2.1 使用方法2.2 完整示例（包括视图…...

编程日记 2024/2/11 18:01:37

FANUC机器人外部远程启动的相关参数设置示例

FANUC机器人外部远程启动的相关参数设置示例如下图所示，在MENU---设置---选择程序中，设置程序选择模式：RSR（这个根据自己实际使用的自动启动方式来决定，你用RSR选RSR，用PNS就选PNS），自动运行开始方法：选择UOP，即RSR1-RSR8的启动信号分别对应UI9-UI16，最后，点击…...

编程日记 2024/2/11 18:00:36

供货商、品牌方、供应链如何对接快团团头部大团长？这三个关键点你一定要记住

供货商、品牌方、供应链如何对接快团团头部大团长？这三个关键点你一定要记住有很多的品牌方、供应链、工厂在线上拿到了不少的社群快团团团长的资源，但是真正对接上的寥寥无几，哪怕自己的品做得非常好，但是都在这个行业触了霉头…...

编程日记 2024/2/11 17:49:25

LLMs之Llama2 70B：《Self-Rewarding Language Models自我奖励语言模型》翻译与解读

LLMs之Llama2 70B：《Self-Rewarding Language Models自我奖励语言模型》翻译与解读目录《Self-Rewarding Language Models》翻译与解读 Abstract 5 Conclusion结论 6 Limitations限制《Self-Rewarding Language Models》翻译与解读地址文章地址&#xff1…...

编程日记 2024/2/11 17:47:20

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/10/15 10:32:29

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/9/28 4:17:32

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2025/9/28 7:15:51

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/10/14 15:15:39

【C++】纯虚函数类外可以写实现吗？

1. 答案先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2025/10/12 20:29:43

DBLP数据库是什么？

DBLP（Digital Bibliography & Library Project）Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高，数据库文献更新速度很快，很好地反映了国际计算机科学学术研…...

编程新知 2025/10/12 6:11:43

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/9/24 0:05:41

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程核心流程商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面代码实现示例（电脑网站支付） 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

CSS太极动态图

1. 案例效果

2. 分析思路

3. 完整代码

3.1 html文件

3.2 css文件

相关文章：