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

CSS太极动态图

news 2026/3/28 23:35:44

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

前端新手入门：跟快马AI学用localStorage实现视频续播功能

今天想和大家分享一个特别适合前端新手练手的小项目：用localStorage实现视频续播功能。这个功能我们平时在各大视频网站都能见到，比如"继续观看"的提示，其实实现起来并不复杂，但涉及了前端开发中几个非常实用的知识点。…...

编程新知 2026/3/28 23:16:36

深入理解VideoCrafter：DDPM3D和DDIM采样算法在高质量视频生成中的应用

深入理解VideoCrafter：DDPM3D和DDIM采样算法在高质量视频生成中的应用【免费下载链接】VideoCrafter VideoCrafter1: Open Diffusion Models for High-Quality Video Generation 项目地址: https://gitcode.com/gh_mirrors/vi/VideoCrafter VideoCrafter是一…...

编程新知 2026/3/28 22:28:09

3步破解音乐平台碎片化困局：Listen1多源聚合技术深度实践

3步破解音乐平台碎片化困局：Listen1多源聚合技术深度实践【免费下载链接】listen1_chrome_extension one for all free music in china (chrome extension, also works for firefox) 项目地址: https://gitcode.com/gh_mirrors/li/listen1_chrome_extension …...

编程新知 2026/3/28 22:28:09

ESP32开发终极指南：5个关键更新助你构建更强大的物联网设备

ESP32开发终极指南：5个关键更新助你构建更强大的物联网设备【免费下载链接】arduino-esp32 Arduino core for the ESP32 项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32 ESP32 Arduino核心项目为ESP32系列芯片提供了完整的Arduino开发环境…...

编程新知 2026/3/28 21:56:00

SDXL-Turbo多场景落地教程：覆盖电商、游戏、教育、自媒体的6大用法

SDXL-Turbo多场景落地教程：覆盖电商、游戏、教育、自媒体的6大用法 1. 认识SDXL-Turbo：重新定义AI绘画体验 SDXL-Turbo不是传统的AI绘画工具，而是一个革命性的实时创作伙伴。想象一下，你打字的同时，画面就在眼前实时…...

编程新知 2026/3/28 21:33:52

如何实现高效无水印视频批量下载？TikTokDownload工具全攻略

如何实现高效无水印视频批量下载？TikTokDownload工具全攻略【免费下载链接】TikTokDownload 抖音去水印批量下载用户主页作品、喜欢、收藏、图文、音频项目地址: https://gitcode.com/gh_mirrors/ti/TikTokDownload 在数字内容创作与素材收集的过程中&…...

编程新知 2026/3/28 21:01:36

视频生成技术新范式：Wan2.2如何重新定义AI创作边界

视频生成技术新范式：Wan2.2如何重新定义AI创作边界【免费下载链接】Wan2.2-Animate-14B 项目地址: https://ai.gitcode.com/hf_mirrors/Wan-AI/Wan2.2-Animate-14B 在数字内容创作领域，视频生成技术正经历着从实验性探索到产业化应用的关键转型…...

编程新知 2026/3/28 20:57:35

AI漫剧软件2025推荐，助力漫画创作高效产出

AI漫剧软件2025推荐，助力漫画创作高效产出在当今数字化时代，AI漫剧软件市场正蓬勃发展。据中国动漫协会《2025中国动漫产业发展报告》显示，2025年AI漫剧软件市场规模同比增长了45%，越来越多的创作者开始借助此类软件提升创作效率。…...

编程新知 2026/3/28 18:02:15

别再手动合并代码了！用Docker Compose 5分钟搞定Gitea私有Git服务器（附PostgreSQL配置）

5分钟极速搭建Gitea私有Git服务：Docker Compose与PostgreSQL黄金组合还在用网盘同步代码？或是把项目文件夹压缩后通过聊天软件传来传去？作为经历过这些"原始管理方式"的开发者，我完全理解手动合并冲突时的崩溃感——上…...

编程新知 2026/3/28 17:05:36

MOOTDX实战指南：零门槛获取股票数据的Python解决方案

MOOTDX实战指南：零门槛获取股票数据的Python解决方案【免费下载链接】mootdx 通达信数据读取的一个简便使用封装项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 副标题：量化投资 | 金融数据接口 | Python工具库一、价值定位&#…...

编程新知 2026/3/28 16:39:29

CSS太极动态图

1. 案例效果

2. 分析思路

3. 完整代码

3.1 html文件

3.2 css文件

相关文章：