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

CSS太极动态图

news 2026/2/9 19:53:37

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型论文信息标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

大学生职业发展与就业创业指导教学评价

这里是引用作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。尤其让我…...

编程新知 2025/11/16 1:39:27

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集，单周期执行；低功耗、CIP 独立外设；用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel（原始…...

编程新知 2025/6/10 21:24:01

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存一级缓存（本地缓存&#…...

编程新知 2026/2/6 6:02:51

CSS太极动态图

1. 案例效果

2. 分析思路

3. 完整代码

3.1 html文件

3.2 css文件

相关文章：