八卦图绕矩形旋转移动

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@keyframes bagua{

25%{transform:translate(500px) rotate(360deg);}
50%{transform:translate(500px,500px) rotate(720deg);}
75%{transform:translate(0,500px) rotate(1080deg);}
100%{transform:translate(0,0) rotate(1440deg);}
}
@-webkit-keyframes bagua{

25%{transform:translate(500px) rotate(360deg);}
50%{transform:translate(500px,500px) rotate(720deg);}
75%{transform:translate(0,500px) rotate(1080deg);}
100%{transform:translate(0,0) rotate(1440deg);}
}
#div {
width: 96px;
height: 48px;
background: white;
border-color: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
animation:bagua 8s;
-webkit-animation:bagua 8s ease 1s infinite normal ;
}
#div:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: white;
border: 18px solid black;
border-radius: 100%;
width: 12px;
height: 12px;
}

#div:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000000;
border: 18px solid white;
border-radius:100%;
width: 12px;
height: 12px;

}
#mydiv{
width:600px;
height: 600px;
border:1px solid gray;

}
</style>
</head>
<body>
<div id="mydiv">
<div id="div">

</div>
</div>
</body>
</html>

时间： 2024-10-25 17:28:03

八卦图绕矩形旋转移动的相关文章

八卦图绕圆旋转

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> //动画旋转 @keyframes bagua{ 100%{transform:rotate(1080deg)} } //适配浏览器 @-webkit-keyframes bagua{ 100%{transform:

矩形旋转碰撞,OBB方向包围盒算法实现

如何进行2D旋转矩形的碰撞检测,可以使用一种叫OBB的检测算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律的.而OBB不仅仅是计算矩形的碰撞检测,而是一种算法模型.简单解释一下概念,包围盒和分离轴定律. 包围盒:是根据物体的集合形状,来决定盒子的大小和方向,这样可以选择最紧凑的盒子来代表物体.见下图 黑色的就是包围盒,可以是凸多边形,最贴近检测物体即可. 分离轴定律:两个凸多边形物体,如果我们能找到一个

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

用h5中的canvas 绘制八卦图

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制八卦图</title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="600" height="500"><

使用CSS达到阴阳八卦图等图形

CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

用CSS实现阴阳八卦图等图形

CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

android animation应用——图片绕固定点旋转

一.功能:实现将图片绕固定点旋转,圈数随机,onTouch后旋转. 二.程序框架: 组成 功能 主Activity:MyActivity 1.实现animation 2.实现onTouch View       :MyView 1.将突破绘制到MyView上 三.程序源代码: MyVIew.java package com.androids.kavinapps.myapplication; import android.content.Context; import android.graphi

Tweetable Mathematical Art 太极八卦图

从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R/G/B值,最终生成1幅1024*1024的图片.要求是每个函数代码不超过140字符,即Tweetable. 来个太极八卦图,娱乐一下. unsigned char RD(int i,int j){ // YOUR CODE HERE #define LEFT (i < DIM/2) #define

算法生成太极八卦图

前面一篇文章是通过算法生成一幅太极图,有道是:无极生太极,太极生两仪,两仪生四象,四象生八卦.那么这一节就为太极生成一个八卦图.虽然我对易经这种玄之又玄的哲学没什么研究,但至少八卦可以看做是二进制的鼻祖.愿太极八卦保佑我们的程序绝无BUG,永不修改. 根据二进制数的规定:有,用1表示;无,用0表示.我们可以得出八卦各卦阳爻和阴爻的二进制数.下面我们写出八卦各卦阳爻的二进制数(即有阳爻为1,无阳爻为0): 坤:黑黑黑,卦符阴阴阴,二进制数为000 艮:黑黑白,卦符阴阴阳,二进制数为001 坎:黑白