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

CSS太极动态图

news 2026/5/19 14:31:32

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

三星固件下载神器Bifrost：三分钟学会跨平台官方固件下载与解密

三星固件下载神器Bifrost：三分钟学会跨平台官方固件下载与解密【免费下载链接】Bifrost Cross-platform tool for downloading Samsung mobile device firmware. 项目地址: https://gitcode.com/gh_mirrors/sa/Bifrost 还在为找不到三星官方固件而烦恼吗&am…...

编程新知 2026/5/19 14:25:13

终极英雄联盟辅助工具League Akari：3分钟快速上手指南

终极英雄联盟辅助工具League Akari：3分钟快速上手指南【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否厌倦了在英雄联盟客户…...

编程新知 2026/5/19 13:13:02

从BadApple到像素艺术：0.96寸OLED上的微型视频播放器全栈实现

1. 从网络热梗到硬件实现：BadApple的像素之旅第一次看到BadApple在0.96寸OLED上流畅播放时，我整个人都惊呆了。这个源自东方Project的经典黑白剪影动画，居然能在比硬币还小的屏幕上完美还原。你可能在B站看过各种版本的BadApple，…...

编程新知 2026/5/19 12:19:02

N_m3u8DL-RE：跨平台流媒体下载终极指南

N_m3u8DL-RE：跨平台流媒体下载终极指南【免费下载链接】N_m3u8DL-RE Cross-Platform, modern and powerful stream downloader for MPD/M3U8/ISM. English/简体中文/繁體中文. 项目地址: https://gitcode.com/GitHub_Trending/nm3/N_m3u8DL-RE 在当今数字时…...

编程新知 2026/5/19 11:33:20

如何为本地音乐库批量下载同步歌词：LRCGET终极指南

如何为本地音乐库批量下载同步歌词：LRCGET终极指南【免费下载链接】lrcget Utility for mass-downloading LRC synced lyrics for your offline music library. 项目地址: https://gitcode.com/gh_mirrors/lr/lrcget 还在为海量本地音乐文件找不到歌词而烦恼…...

编程新知 2026/5/19 11:07:32

KLayout 0.30.0：如何用这款专业版图工具提升你的集成电路设计效率

KLayout 0.30.0：如何用这款专业版图工具提升你的集成电路设计效率【免费下载链接】klayout KLayout Main Sources 项目地址: https://gitcode.com/gh_mirrors/kl/klayout 如果你正在寻找一款既强大又灵活的开源集成电路版图查看与编辑工具，KLayo…...

编程新知 2026/5/19 10:42:16

对比直接使用厂商API体验Taotoken在路由与容灾上的差异

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度对比直接使用厂商API体验Taotoken在路由与容灾上的差异 1. 引言：一次意料之外的服务波动在日常开发与业务运营中&…...

编程新知 2026/5/19 9:45:58

深入解析PCI中断路由：从硬件引脚到操作系统中断处理的完整链路

1. 项目概述与核心问题在计算机硬件系统里，中断机制是设备与处理器高效通信的生命线。它允许设备在需要处理器服务时，主动“打断”处理器当前的工作流，而不是让处理器不断地去“询问”设备的状态。对于PCI（Peripheral Component I…...

编程新知 2026/5/19 8:59:22

将自动化脚本打包成自己的app

在移动自动化领域，将编写好的 JS 脚本打包为独立 APK，能保护核心脚本逻辑、定制专属app。本文将从原理、准备、脚本编写、打包配置到测试发布，全方位详解自动化脚本打包成专属 APP 的完整流程。一、定制 APP 核心原理冰狐定制 APP 功能本质是…...

编程新知 2026/5/19 8:30:56

Windows Cleaner终极指南：3分钟解决C盘爆满，让电脑重获新生！[特殊字符]

Windows Cleaner终极指南：3分钟解决C盘爆满，让电脑重获新生！🚀 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是…...

编程新知 2026/5/19 8:16:42

CSS太极动态图

1. 案例效果

2. 分析思路

3. 完整代码

3.1 html文件

3.2 css文件

相关文章：