用HTML5制作一个太极页面

最新推荐文章于 2023-07-04 21:30:32 发布
最新推荐文章于 2023-07-04 21:30:32 发布
阅读量606 收藏 3
点赞数 2
分类专栏： 笔记 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Csurvival/article/details/115593901
版权

今天用Html制作一个会旋转的太极页面

我是一个萌新，有众多不足的地方请大佬多多指教，不喜勿喷

制作后的效果（有改动，手机也可以打开） https://survivor15.github.io/bagua01/

话不多说直接上代码

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>我的第一个页面</title>
		<style>
			body{
				background: #eee;
			}
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			@keyframes zhuan{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			#八卦{
				width: 400px;
				height: 400px;
				border-radius: 50%;
				position: relative;
				overflow: hidden;
				animation: zhuan 10s infinite linear ;
				box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
			}
			@media(max-width: 500px) {
				#八卦{
				width: 200px;
				height: 200px;
				}
			}
			#八卦>div:first-child{
				width: 50%;
				height: 100%;
				position: absolute;
				left: 0;
				background: black;
			}
			#八卦>div:nth-child(2){
				width: 50%;
				height: 100%;
				position: absolute;
				right: 0;
				background: white;
			}
			#八卦>div:nth-child(3){
				position: absolute;
				width: 200px;
				height: 200px;
				left: 50%;
				margin-left: -100px;
				border-radius: 50%;
				background: black;
			}
			@media(max-width: 500px){
			#八卦>div:nth-child(3){
				width: 100px;
				height: 100px;
				margin-left: -50px;
				}
			}
			#八卦>div:nth-child(4){
				position: absolute;
				width: 200px;
				height: 200px;
				left: 50%;
				bottom: 0;
				margin-left: -100px;
				border-radius: 50%;
				background: white;
			}
			@media(max-width: 500px){
			#八卦>div:nth-child(4){
				width: 100px;
				height: 100px;
				margin-left: -50px;
				}
			}
			#八卦>div:nth-child(5){
				position: absolute;
				width: 50px;
				height: 50px;
				left: 50%;
				top: 75px;
				margin-left: -25px;
				border-radius: 50%;
				background: white;
			}
			@media(max-width: 500px){
			#八卦>div:nth-child(5){
				width: 25px;
				height: 25px;
				top: 37.5px;
				margin-left: -12.5px;
				}
			}
			#八卦>div:nth-child(6){
				position: absolute;
				width: 50px;
				height: 50px;
				left: 50%;
				bottom: 75px;
				margin-left: -25px;
				border-radius: 50%;
				background: black;
			}
			@media(max-width: 500px){
			#八卦>div:nth-child(6){
				width: 25px;
				height: 25px;
				bottom: 37.5px;
				margin-left: -12.5px;
				}
			}

			#八卦-wrapper{
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			#八卦-描述{
				margin-top: 1em;
			}
		</style>
	</head>

	<body>
		<div id="八卦-wrapper">
			<div id="八卦">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id="八卦-描述">
				道可道，非常道
			</div>
		</div>
	</body>
</html>

——————————————————————————————
在这里插入图片描述
这里代表语言是中文的意思，lang="en"代表英文
——————————————————————————————
在这里插入图片描述
这是八卦最外面的圆，这里的50%可以是200px （大于200px也是一个圆）

英文radius的意思是半径
——————————————————————————————
在这里插入图片描述

意思是选中“八卦”元素中的第一个div
——————————————————————————————
在这里插入图片描述
意思是选中“八卦”元素中的第二个div，以此类推
——————————————————————————————
在这里插入图片描述
添加一个CSS3的一个属性 animation 动画的名字叫做zhuan，时间是10s一圈
infiniite是一直循环转的意思，linear是线性的转的意思（即有规律的旋转）
——————————————————————————————
在这里插入图片描述
声明一个动画叫zhuan，一开始转0°最后转360°
——————————————————————————————
在这里插入图片描述
给八卦图加阴影
——————————————————————————————
在这里插入图片描述
100vh——>（vh:viewpoint（用户可以看到的范围）height）
——————————————————————————————
在这里插入图片描述
前三行让八卦图居中，最后一行是让div竖着排列
——————————————————————————————
手机
在这里插入图片描述

@mediia（媒体查询）
这代码的意思是：当你的页面小于等于500px的时候，我额外的添加一个属性

要记得差不多就这些啦，感谢看到这里的伙伴们❤

有什么不妥的地方欢迎留言评论❤

白熊就是白熊
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
太极图形html5代码,HTML5 Canvas组件绘制太极图案
weixin_33345090的博客
06-04 542
一实现思路：实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。二程序效果如下： 三关键程序解析：绘制半圆的程序，其中200，200表示开始绘制圆心点坐标...
太极图和机器人(HTML+CSS)
m0_50609122的博客
10-13 467
HTML+CSS思路分享
html5做太极,html5怎么制作会转圈的太极
weixin_31041583的博客
06-27 140
太极阴阳图.box-taiji {width: 0;height: 400px;position: relative;margin: 50px auto;border-left: 200px solid #000;border-right: 200px solid #fff;box-shadow: 0 0 30px rgba(0,0,0,.5);border-radius: 400px;anima...
网页实现太极
08-19
一个简单的HTML5的太极，所用甚检不吝指教。欢迎来交流交流
html实现太极图效果
JackieDYH的博客
03-14 4163
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴阳</title> <style> .yinyang { width: 200px; height: 99px; border:1px s...
太极图形html5代码,太极图案用html5怎样
weixin_35990358的博客
06-04 206
<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%><!DOCTYPEHTML><html><body><canvasid="myCanvas"width="600"height="400"style="background-color...
taiGi:使用会动的代码展示太极动画的制作过程：
03-31
【标题】"taiGi:使用会动的代码展示太极动画的制作过程"是一个项目，它利用编程技术来创建一个动态的太极图案动画。这个项目主要涉及到JavaScript、HTML5和CSS3这三种核心技术，旨在通过实际操作来演示如何用代码...
Canvas制作旋转的太极的示例
12-14
在本文中，我们将探讨如何使用HTML5的Canvas API来创建一个旋转的太极图案。Canvas是Web开发中的一个强大工具，允许开发者动态绘制图形并进行动画处理。在这个示例中，太极图由黑色和白色的部分组成，通过CSS实现...
html+css3实现可以旋转的太极图案效果.zip
最新发布
09-25
3. **jQuery**：jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作。在这个项目中，jQuery可能被用来控制太极图案的旋转行为，例如，通过监听用户的交互来启动或停止旋转动画。...
静态太极图（css考试试题）.rar
08-24
本题目中的“静态太极图（css考试试题）”是一个练习项目，旨在帮助学习者深化对CSS伪元素和定位的理解，并锻炼编程思维。 首先，我们需要了解HTML和CSS的基础。HTML (HyperText Markup Language) 是一种标记语言，...
一个简单的HTML写的太极图
04-17
简单的太极界面
HTML5--使用CSS3制作动态太极
weixin_43379235的博客
07-11 471
1. 效果展示： 2. 代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>使用CSS3制作太极</title> <style> .taiji{ animation: taiji 10s infinite ease ; width: 100px;height: 200px; background-color: #f00;
html css绘制太极,css画太极阴阳图
weixin_39616565的博客
06-29 341
前言：道生一，一生二，二生三，三生万物今天，我们来聊聊如何用 CSS 实现 太极图?在网上可以找到很多资料，不过我强推荐一个css酷炫效果的网站，我们要实现一个 阴阳图，谷歌搜索关键词：css tricks shape开始我们的第一种写法，谷歌搜索关键词：css3 linear gradient generator，这个是线性渐变的工具，看下面代码：html 代码：复制代码css 代码：body ...
html 绘制太极
pugongyingyangyue的博客
03-22 349
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigCircle{ width: 200px; h...
用html+css做旋转太极
m0_71869542的博客
07-04 204
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
使用HTML5 Canvas绘制一个太极，并令其转动
LiuZijian的博客o(^▽^)o
10-09 3350
使用HTML5 Canvas绘制一个太极，并令其转动。
html5--5-14 阶段小练习：绘制太极图案
weixin_34346099的博客
12-05 283
html5--5-14 阶段小练习：绘制太极图案   学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法，这里只做一个简单的演示，练习的时候可以自己思考一下，尝试其他的方法，或者对这个图案进行进一步的美化。 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2,y2)-...
HTML旋转的太极图
MOONCOM的博客
01-17 2942
代码如下： 旋转的太极图 body{ margin: 0px; background-color: #ccc; } html,body{ height: 100%; } @keyframes ani{ 100%{ transform: rotate(360deg); } } .content{ position: fixed;
计算机太极图怎么设计,网页设计之PS经典案例“太极图”如何画？
weixin_39883129的博客
06-21 410
Ps工具学以致用-经典太极图分享一个非常经典的ps案例—ps太极图。通过对这个图的练习，对ps基本工具将会有一个进一步的了解。Ps制作太极图发方法，非常之多。我这里仅仅用到最简单的几个工具，就可以完成，都在我们说的11个ps工具之内。选区、参考线、放大镜、填充1、打开Photoshop，单击【文件→新建】，打开新建对话框。输入新建图像的宽和高，背景选择【白色】，然后单击【确定】。2、因为太极图是黑...
用HTML写一个太极八卦图
06-07
好的，以下是一个简单的HTML代码，用来绘制太极八卦图： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极八卦图</title> </head> <body> <div style="width: 200px; height: 200px; border-radius: 50%; background-color: black; position: relative;"> <div style="width: 100px; height: 100px; border-radius: 50%; background-color: white; position: absolute; top: 0; left: 50%; margin-left: -50px;"></div> <div style="width: 100px; height: 100px; border-radius: 50%; background-color: black; position: absolute; bottom: 0; left: 50%; margin-left: -50px;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: white; position: absolute; top: 25px; left: 50%; margin-left: -25px;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: black; position: absolute; bottom: 25px; left: 50%; margin-left: -25px;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: black; position: absolute; top: 75px; left: 0;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: white; position: absolute; top: 75px; right: 0;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: white; position: absolute; bottom: 75px; left: 0;"></div> <div style="width: 50px; height: 50px; border-radius: 50%; background-color: black; position: absolute; bottom: 75px; right: 0;"></div> </div> </body> </html> ``` 这段代码会生成一个200*200大小的黑色圆形，内部有一个白色圆和一个黑色圆，分别占据圆的上下两个半部分。同时，圆内四个角落处分别有一个黑色/白色的半圆，构成了八卦图的形状。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值