简单八卦图的实现

最新推荐文章于 2024-04-21 13:53:32 发布
最新推荐文章于 2024-04-21 13:53:32 发布
阅读量423 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/89930026
版权 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>八卦图</title>
	<style>
	.box{
		height: 300px;
		width: 400px;
		background: rgba(51,102,205,0.8);
		margin: 100px auto;
		position: relative;
		
	}
	.box1{
		height: 200px;
		width: 200px;
		background: black;
		border-radius: 50%;
		position: absolute;
        border: 5px solid rgba(255,255,254,0.8);
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
        display: none;
	}
    .box1_1{
    	height: 100px;
    	width: 200px;
    	border-radius: 100px 100px 0 0;
    	background: white;
    	/*border: 1px solid;*/
    }
    .box1_2{
    	height: 100px;
    	width: 100px;
    	background: white;
    	position: absolute;
        right: 0;
        top: 50px;
        border-radius: 50%;
        /*border: 1px solid;*/
    }
    .box1_3{
    	height: 100px;
    	width: 100px;
    	background: black;
    	position: absolute;
        left: 0;
        top: 50px;
        border-radius: 50%;
    }
    .box2{
    	height: 50px;
    	width: 50px;
    	background: black;
    	position: absolute;
    	right: 0;
    	top: 50%;
    	transform:translate(-50%,-50%);
    	border-radius: 50%;
    }
    .box3{
    	height: 50px;
    	width: 50px;
    	background: white;
    	position: absolute;
    	/*left: 0;
    	top: 0;*/
    	transform:translate(50%,50%);
    	border-radius: 50%;

    }
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			<div class="box1_1"></div>
			<div class="box1_2">
				<div class="box2"></div>
			</div>
			<div class="box1_3">
				<div class="box3"></div>
            </div>
		</div>
	</div>
    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".box1").show(2000);
    })
    </script>
</body>
</html>

maxiaoxin1314
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas制作八卦图源码
qq_36024963的博客
02-20 410
 源码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
C# 画八卦图 Graphic
12-04
自己写的一个画图类，在指定的画布上画出指定大小的八卦图.
java canvas 画图片_canvas画布——画八卦图
weixin_28989055的博客
02-23 415
浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 元素。定义和用法arc() 方法创建弧/曲线(用于创建圆或部分圆)。提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。提示：请使用stroke()...
算法生成太极八卦图
weixin_33720452的博客
10-29 732
      前面一篇文章是通过算法生成一幅太极图,有道是:无极生太极，太极生两仪，两仪生四象，四象生八卦.那么这一节就为太极生成一个八卦图.八卦图衍生自汉族古代的《河图》与《洛书》，传为伏羲所作。其中《河图》演化为先天八卦，《洛书》演化为后天八卦。八卦各有三爻，“乾、坤、震、巽、坎、离、艮、兑”分立八方，象征“天、地、雷、风、水、火、山、泽”八种性质与自然现象，象征世界的变化与循环，分类方法如同五...
matlab绘图画八卦,我这里有十条画图秘籍，让你不再「灵魂画手」
weixin_39935319的博客
03-20 476
原标题：我这里有十条画图秘籍，让你不再「灵魂画手」本文由微信公众号“科研圈”(ID: keyanquan) 授权转载转载请先联系keyanquan@huanqiukexue.com 图片来源：Pixabay来源 PLoS One作者 Nicolas P. Rougier, Michael Droettboom, Philip E. Bourne翻译 LYM审校 戚译引科学可视化通常被定义为以图片方...
基于C#实现的简易绘图工具设计.zip
06-09
资源包含文件：设计报告wrod+项目源码 通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,...详细介绍参考：https://biyezuopin.blog.csdn.net/article/details/124295574?spm=1001.2014.3001.5502
PHP实现的简易版图片相似度比较
10-24
PHP实现的简易版图片相似度比较的知识...以上知识点概述了PHP实现简易版图片相似度比较的核心概念、技术要求、代码实现、应用示例以及需要注意的问题，为希望使用PHP进行图片相似度比较的开发者提供了全面的参考资料。
JS实现简易换图时钟功能分析
10-18
本文重点介绍了如何使用JavaScript实现一个简易的图片换图时钟功能。通过结合实例，文章详细解析了使用JavaScript中的时间函数定时变换图片以显示时钟效果的技巧。代码注释详尽，便于理解和学习。 知识点一：HTML...
原生js实现简单轮播图
01-18
本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下 一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化 css: 初始化： 包括外边距...
JS实现简易图片轮播效果的方法
12-12
本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下： 这里使用JS制作简易图片轮播效果： 制作比较粗糙，使用的图片是width：660ppx,height：550px; 效果图如下： 代码部分如下： <!...
matlab绘制六角星
10-25
Matlab绘制六角星的绘制，程序比较简单而且能看懂
html制作动态八卦图源码
weixin_43474701的博客
12-14 2764
动态八卦图 自动旋转的八卦图，一个html文件就行，如下动态图所示： taijitu.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="taiji"> </div> </body> <style&gt
C#绘制验证码
weixin_64847823的博客
03-19 1207
我们在登录一些网站的时候、或者说报名四六级考试的时候等等，一般都会填写验证码之类的东西，我将分享一下如何绘制验证码。 1.功能实现，当单击PictureBox1中任何一个地方时显现出一个随机的验证码 2.绘制过程 （1）建立一个新项目，在窗体内放置一个PictureBox 在PictureBox1的属性Click,将会自动出现一个单击事件函数 (2)查看代码，开始编写，首先定义一些随机数 private void pictureBox1_Click(object sender, ...
【Godot4.2】太极八卦图绘制
最新发布
巽的博客
04-21 391
作为中国传统文化符号之一，太极八卦图，无论是哲学还是玄学，都不可能避开。之前在函数库实现了太极的点求取函数。当时采用的时圆弧拼接的方式，但是存在某些尺寸下多边形无法三角化的问题。于是就有了今天的内容。就是采取一种完全不同的思路来绘制太极。并在此基础上补足八卦的绘制。本节介绍了对复杂图形——太极八卦图的求图形顶点和绘制思路可以看到，灵活的利用绘图顺序，进行“盖印”操作，是一种聪明的图形绘制方式另外，也可以看到，有些复杂图形的求解需要使用多重线性变换。
css3实现旋转的八卦图动画
车联网开发的博客
12-05 1412
border的功能真的不容小觑，可以实现一些意想不到的特殊符号。今天就用border实现正方形继而实现旋转的八卦图 先上个效果图 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" co
canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
weixin_32949451的博客
12-29 153
Canvas八卦图绘制前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)方法的使用，但并不是所有的曲线所有的曲线都需要用贝塞尔曲线来描述，毕竟在没有专业软件辅助的情况下，确认控...
八卦图代码matlab,12行javascript代码绘制一个八卦图_javascript技巧
weixin_30220465的博客
03-19 846
一句话说明：用有限的代码构建一个1024*1024的颜色矩阵，秀出你的编程&艺术之美起源于 stackexchange 上的一个问题， 这里稍微做了一下扩展，支持更多编程语言，并放宽了代码长度的限制。规则目标：通过实现 模版 中的一个函数 get_color_at(x, y) ，在一个 1024*1024 的画布上画出尽可能 “有意思” 的图案。参数：int x, int y ，取值均为 ...
用java画出太极八卦图
weixin_52222693的博客
03-02 475
mport javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; public class Taiji { public static void main(String[] args) throws IOException { BufferedImage i = new Buffe.
java怎么画八卦图_自己画八卦图怎么画？电脑绘制八卦图|八卦图的简单画法
weixin_39979215的博客
02-26 355
今天又是美妙的周五了，其实小编周一早上起床睁开眼的时候，就很期待的想着，如果今天是周五就好了。结果没想到，时间一下子就过去了，今天真的是周五了。啊哈哈，很绕是吧，还是不说废话了，来看看今天的教程方案吧！画八卦图，当然不是用手画啦，小编是个手残党，从小就不会画画，所以今天的八卦图当然是教大家如何使用电脑画啦，跟小编一样是手残党的赶紧来围观吧！不会手绘那就来学习电脑绘制八卦图吧！首先，需要先通过上方的...
JAVA环境下的图形用户界面绘图实现
"JAVA课程设计，交通大学交通运输学院的JAVA程序设计课程设计任务，目标是实现一个图形用户界面，用户可以通过菜单或按钮进行简单的绘图，如画直线、空心或实心的椭圆、矩形和多边形。设计要求程序结构清晰，逻辑性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值