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

CSS太极动态图

news 2025/7/4 23:30:59

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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/6/28 11:42:05

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/6/28 8:53:11

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/7/4 7:26:28

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...

编程新知 2025/7/4 2:21:56

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/6/20 13:47:44

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/7/4 13:16:46

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/7/4 18:26:36

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/7/4 12:06:10

CSS太极动态图

1. 案例效果

2. 分析思路

3. 完整代码

3.1 html文件

3.2 css文件

相关文章：