绘制太极图（CSS）

最新推荐文章于 2023-04-22 13:30:32 发布
最新推荐文章于 2023-04-22 13:30:32 发布
阅读量1.7k 收藏 10
点赞数 6
分类专栏： html+css+js习题集 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47340917/article/details/120410422
版权

绘制太极图（CSS）


Hello！大家好，这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。

预览图

太极图
貌似有些卡顿 是录制软件的锅。。。

思路

先在页面中绘制出一个大的白色圆形，再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆，里面居中绘制一个对立颜色的中心圆，最后利用css3动画让其旋转。

html布局代码部分

	<body>
		<!-- 先是html代码部分 -->
		<div class="box">
			<!-- .box 最外层存放的容器 -->
			<div class="list1 lis">
				<!-- .list1 黑色的半圆 -->
				<div class="bom bom1">
					<!-- .bom1 黑色部分延伸出来的中等圆 -->
					<div class="bos bos1"></div>
					<!-- .bos1 黑色中的白色小园 -->
最低0.47元/天 解锁文章
万物之恋
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS】用CSS画太极图
SEVLT
01-21 1307
HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tai-chi</title> <link rel="stylesheet" href="style.css"> </head&...
纯css实现太极图
我一点也不皮的博客
04-04 1327
纯css实现太极图动画概览步骤划分区域绘制样式动画源码 概览 这是最终的效果 如何通过纯粹的css样式去实现这一动画呢？让我们一步一步来完成。 步骤 划分区域 我们先需要在html中绘制一个静止的太极图，这就需要将太极图划分成不同的区域，然后为每个区域添加相应的样式。 我们可以按照下图的方式来划分太极图区域： 其中，每个不同的区域以不同的颜色填充，这样一来可以看出，我们将太极图划分为了六个区域，为了方便区分，我们为每个区域添加独特的class名称，分别为：taichi–left、taichi–right
用CSS画个太极图
weixin_33921089的博客
11-14 501
效果图如上，预览链接点这里。多用css画几个图就会发现，其实都是视觉欺骗的把戏。你看到的太极图的不是你以为的太极图。人有时也是。我觉得用CSS画图，最重要的一点是结构的拆解。初看时不知如何下手就是因为不知道从何画起并和css的属性结合。在这里，你第一眼肯定知道要用上border-radius这个属性。接下来呢？我觉得下面四张演变图你就清楚了。就把代码贴上逐行分析吧，文字分享略枯燥。主要是CSS代码...
CSS画太极阴阳图
weixin_34128839的博客
01-29 400
引言 CSS可以画很多图形，今天我们来画一个特殊的图形——中国古代哲学的“太极图”。 如果没有用CSS画过简单图形，建议先学习如何用border属性画三角形。 构思 步骤 1.在 html 中写一个 div 标签，class 命名为 taiChi 。 &lt;div class="taiChi"&gt;&lt;/div&gt; 复制代码 2.假设我们想画一个宽高为100px太极图，border...
如何用CSS制作太极图？
ab_dk的博客
02-22 1673
如何用CSS制作太极图呢？ 这要用到boder的一个属性-----border-radius，通过改变数值的大小来控制圆角的弧度。首先，我们可以把太极图分为两大部分，如下图所示： 太极图由红框和蓝框中的两个半圆组成，左侧圆的背景颜色为白色，右侧背景颜色为黑色。 .box1{width: 200px; height: 400px; background: white; border-radius:...
css太极图
sunyiban的专栏
12-29 709
body {background: gray;} #yin-yang { width: 96px; height: 48px; background: #000; border-color: white; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 1
CSS3绘制旋转太极图特效代码
03-20
制作过程： 第一步创建一个1:1的DIV(width和height)自定义： 第二步创建两个矩形，高度为宽度的一半拼合则为一个正方形 第三步设置上矩形和下矩形的角度使其成为半圆，切设置边框 第四步每个矩形里创建圆（且创建内...
利用CSS3的border-radius绘制太极及爱心图案示例
01-21
太极图border-radius 除了做边框圆角效果之外，把它用在画图示上的话，其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。 检视原始码 HTML XML/HTML Code复制内容到剪贴板 <body>  ...
CSS3绘制旋转太极图代码.zip
07-03
制作过程： 第一步创建一个1:1的DIV(width和height)自定义： 第二步创建两个矩形，高度为宽度的一半拼合则为一个正方形 第三步设置上矩形和下矩形的角度使其...第六步为其父标签创建旋转动画参考css3里面的即可。
利用css实现太极图的制作（带旋转动画） （课程实践教学项目）
老板别放辣椒！！的博客
03-31 1929
可实现旋转的太极图
CSS 太极图
PinkCoder
12-04 942
CSS 太极图 ，纯属兴趣画图
css 实现太极效果
蓝朽的小世界
04-22 6461
css实现太极效果
CSS 之 太极图
weixin_34268753的博客
11-14 177
整体思路: 太极有三个元素, 大圆,两个小圆. 有三个内容为空的border矩形 一大: 默认内容为空, 就只剩下白色背景, 然后右边加一个一样大的黑色border 二小: 一上一下放在大圆的上下两个鱼眼处 默认内容为空, 白色背景是中间的小圆, 背景是黑色 默认内容为空, 黑色背景是中间的小圆, 背景是白色 太极是圆的啊, 所以把矩形变成圆形的神奇属性:border-radius....
通过CSS实现太极图案例
xu_yuxuyu的博客
11-05 4681
概述： 所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。 话不多说，先让我们看看太极图的形状~ 乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。 思路 先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
CSS画太极图
fly
03-22 490
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>太极图</title> <style type="text/css" media="screen"> #a{ width: 300px; height:...
CSS实现太极图效果
Zero____________的博客
07-12 261
记得要先生成一个div盒子才会有效果 <style> body { background-color: #ccc; } div { position: relative; width: 150px; height: 300px; background-color: #fff; border
css3制作太极图
qq_44711316的博客
11-10 460
CSS3实现自转太极图 动态的，是有动画效果的，只是我没弄gif格式 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
CSS实现太极图案
fengfangyuan的博客
04-13 875
知识点 伪类：实现太极中两个空心圆 边框、背景：边框大于背景，实现空心小圆 CSS3动画：实现太极无限旋转 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> body{ ...
Python绘制太极图
最新发布
05-26
Python可以使用多个绘图库进行太极图的绘制，其中较为常用的是turtle库和matplotlib库。下面分别介绍这两种库的使用方法。 1. 使用turtle库绘制太极图 ```python import turtle # 设置画布大小和背景色 turtle.setup(500, 500) turtle.bgcolor('black') # 绘制白色半圆 turtle.fillcolor('white') turtle.begin_fill() turtle.circle(100, 180) turtle.end_fill() # 绘制黑色半圆 turtle.fillcolor('black') turtle.begin_fill() turtle.circle(100, -180) turtle.end_fill() # 绘制白色小圆 turtle.penup() turtle.goto(0, 50) turtle.pendown() turtle.fillcolor('white') turtle.begin_fill() turtle.circle(20) turtle.end_fill() # 绘制黑色小圆 turtle.penup() turtle.goto(0, -50) turtle.pendown() turtle.fillcolor('black') turtle.begin_fill() turtle.circle(20) turtle.end_fill() # 隐藏画笔 turtle.hideturtle() # 显示绘图窗口 turtle.done() ``` 2. 使用matplotlib库绘制太极图 ```python import matplotlib.pyplot as plt # 设置图形大小和分辨率 fig = plt.figure(figsize=(4, 4), dpi=100) # 绘制白色半圆 theta1 = [i for i in range(0, 181)] r1 = [100] * len(theta1) plt.polar(theta1, r1, color='white') # 绘制黑色半圆 theta2 = [i for i in range(180, 361)] r2 = [100] * len(theta2) plt.polar(theta2, r2, color='black') # 绘制白色小圆 plt.polar(0, 50, marker='o', markersize=10, color='white') # 绘制黑色小圆 plt.polar(0, -50, marker='o', markersize=10, color='black') # 隐藏极轴和刻度标签 plt.axis('off') # 显示绘图窗口 plt.show() ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值