html制作动态八卦图源码

最新推荐文章于 2024-03-07 17:52:03 发布
最新推荐文章于 2024-03-07 17:52:03 发布
阅读量2.6k 收藏 14
点赞数 2
分类专栏： 网页设计 文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43474701/article/details/121941224
版权

动态八卦图

自动旋转的八卦图，一个html文件就行，如下动态图所示：

请添加图片描述
taijitu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="taiji">
		</div>
	</body>
	<style>
		body{
			background:rgba(128,128,128,.2);
		}
		#taiji{
			margin: 50px auto;
			width: 600px;
			height: 600px;
			animation: rotate 3s linear infinite;
			animation-play-state: paused;
		}
		.taiji{
			width: 300px;
			height: 300px;
			border-radius: 50%;
			position: relative;
			margin: 200px auto;
			top:150px;
			background-image: linear-gradient(to right,black 50%, white 50%);
		}
		.taiji::before,.taiji::after{
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius:50%;
			left:50%;
			transform: translateX(-50%);
		}
		.taiji::before{
			background-color: white;
			border: 60px solid black;
			top: 0;
		}
		.taiji::after{
			background-color: black;
			border: 60px solid white;
			bottom: 0;
		}
		.line{
			width: inherit;
			height: inherit;
			transform-origin:50% 50%;
			transition: all 0s;
			position: absolute;
		}
		.line1{
			height: 10px;
			width: 80px;
			background-color: #000000;
			margin: 10px auto;
		}
		.line2{
			display: flex;
			width: 80px;
			margin: 10px auto;
		}
		.line3,.line4{
			height: 10px;
			width: 35px;
			background-color: #000000;
		}
		.line4{
			margin-left: 10px;
		}
		@keyframes rotate{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
		#taiji:hover{
			animation-play-state: running;
		}
	</style>
	<script>
		var m = document.getElementById('taiji'),
			lineLists = ",2,02,12,012,01,1,0";
		lineLists = lineLists.split(',');
		//四周的黑线
		for(let i = 0; i < 8; i++){
			var	newNode = document.createElement("div");
			newNode.classList.add("line");
			for(let j = 0; j < 3; j++){
				let child = document.createElement("div");
				if(lineLists[i].indexOf(j) != -1){
					let c1 = document.createElement("div"),
						c2 = document.createElement("div");
					child.classList.add("line2");
					c1.classList.add("line3");
					c2.classList.add("line4");
					child.appendChild(c1);
					child.appendChild(c2);
				}else{
					child.classList.add("line1");
				}
				newNode.appendChild(child);
			}
			newNode.style.transform = `rotate(${i*45}deg)`;
			m.appendChild(newNode);
		}
		//太极图中间部分
		var	newNode = document.createElement("div");
		newNode.classList.add("taiji");
		m.appendChild(newNode);
		console.log(m);
	</script>
</html>

鼠标放在八卦图上面才会旋转哦！
请添加图片描述

编程ID
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
html5制作八卦图,使用HTML+CSS画太极八卦图
weixin_39751391的博客
06-10 712
使用HTML+CSS画太极八卦图基本语法CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}选择符:1.元素选择器:找到同名一系列2.类选择器:找到同类名一系列定义:web前端开发1调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}3.id选择器:唯一性，只能找到一个定义:web前端开发1调用:#div1{属性1:属性...
jQuery八卦图背景时钟代码
06-24
jQuery八卦图背景时钟代码是一款具有中国风的特色的时间结合八卦图算风水时钟代码。
纯css实现太极八卦图
最新发布
前端码农
03-07 1306
纯css实现太极八卦图
HTML5水波浪起伏模拟动画
08-23
关于HTML5的波浪特效动画，之前我们已经分享过一些了，比如：HTML5 WebGL水面水波荡漾特效、HTML5水波荡漾动画特效等。这次我们要来分享一款基于HTML5的水波浪起伏模拟动画，我们可以设置水的粘度，点击水面即可泛起水波浪，一起来试试。
Canvas核心技术与游戏开发（含完整源码）
02-05
Canvas是可以使用脚本(通常为 JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。本书涵盖了canvas二维绘图以及制作动画的方方面面，内容详实，同时随书附带了源码。本书行文流畅，通俗易懂，尤其适合于初学者学习和参考，在敲代码绘图的过程中读者将深刻体会到canvas的强大之处
如何用html 写八卦
zwq123w的博客
11-15 940
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html,body{ height:100%; } *{ padding:0; margin:0; }
java canvas 画图片_canvas画布——画八卦图
weixin_28989055的博客
02-23 356
浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 元素。定义和用法arc() 方法创建弧/曲线(用于创建圆或部分圆)。提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。提示：请使用stroke()...
CSS伪类实现加号
CaseyWei
11-15 899
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
八卦图炫酷动态效果
ZL3064436257的博客
03-14 715
使用纯html+css+js制作八卦图旋转效果
动态八卦图html,HTML绘制太极八卦图
weixin_30227565的博客
06-08 1176
实现效果如下：实现代码如下：太极八卦图div{text-align: center;margin-top: 30px;}#mytj{background-color: skyblue;}var mytj = document.getElementById('mytj');var mt = mytj.getContext('2d');//左边黑色大半圆mt.beginPath();mt.arc(30...
HTML八卦图
weixin_73184582的博客
03-14 228
一个炫酷的原生八卦图
各类电商购物网站商城系统静态网页html制作（含静态网站源码）
11-07
界面图展示：https://blog.csdn.net/weixin_40228600/article/details/121189075 主要技术div、css、jquery技术，适合再次开发，网站有各个板块的内容，比如，服饰、车类，男士用品、数码产品、女性化妆品等各类网站...
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
经过大概一周左右的时间完美完成任务，同时也有50多个非常不错的源码案例分享给大家，效果图可以参考 https://blog.csdn.net/daokedream/article/details/110202385，供借鉴，数据展示的形式基本都差不多，拿过去改...
java源码包---java 源码 大量 实例
04-18
Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB来模拟银行ATM...
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
09-28
会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景，点击图片任意位置都会触发，附源码下载，喜欢的朋友可以参考下
Android自定义View实现八卦图效果
chengyuanyuan1的专栏
10-31 601
最近研究了下自定义View，就自己写了个Demo练练手。网上有很多讲自定义View实现的文章，我这里就不说了，直接上Demo。
动态八卦图html,Html5 Canvas 系列_绘图三(H5 ，CSS3 动态八卦图)
weixin_33634886的博客
06-08 291
Canvas 绘图#canvas{display:block;margin: 125px auto;animation: rotate 3s linear 0s infinite normal;-webkit-animation: rotate 3s linear 0s infinite normal;-moz-animation: rotate 3s linear 0s infinite no...
时钟罗盘
热门推荐
JavaDarren的博客
08-09 2万+
有一次，我在抖音看到一个小视频，是关于时钟的，当时在一些前端群问方法，不得而终。 后来百度到了结果，收藏在博客中，知道今天才想起来， 我个人觉得源码中还有一些不足，比如如何更改背景图片，这个简单， 如何做成手机应用软件，点击即可更改？ 在图片中央添加自己喜欢的字样？ 求：中间添加的字为艺术字，可以发光，背景图片是动态的酷炫效果的实现方法？ 渴望大神赐教！！不甚感激！！ https:/...
八卦动态时钟html代码_抖音很火的八卦时钟轮盘动态壁纸
weixin_33926755的博客
01-10 7431
最近在抖音上有一款“时间转盘文字壁纸”非常火，炫酷的锁屏动态效果，俘获了不少网友的小心肝。随后小米、华为等手机的主题商店都上架了这款壁纸。但是无一例外的都是收费的！不少网友在网络上苦苦寻找这款“时间转盘文字锁屏”APP，除了下载到一些垃圾APP之外，却始终没有找到真正的“文字锁屏”APP。空空也曾在网上搜寻了好久，但都不是特别的完美。要么是设置复杂，要么垃圾广告过多。在众多的同类型的AP...
html css太极八卦图
10-13
以下是 HTML CSS 实现太极八卦图的代码： HTML 代码： ``` <div class="taiji"> <div class="yin"></div> <div class="yang"></div> </div> ``` CSS 代码： ``` .taiji { width: 200px; height: 200px; border-radius: 50%; background-color: #000; position: relative; } .yin, .yang { width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .yin { background-color: #fff; } .yang { background-color: #000; } .yin:before, .yang:before { content: ""; display: block; width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .yin:before { background-color: #000; } .yang:before { background-color: #fff; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程ID

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值