八卦图绕圆旋转

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

//动画旋转
@keyframes bagua{
100%{transform:rotate(1080deg)}
}

//适配浏览器
@-webkit-keyframes bagua{
100%{transform:rotate(1080deg)}

}
#div {
width: 96px;
height: 48px;
background: white;
border-color: #000000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
left:130px;
top:30px;
transform-origin:150px 260px;
animation:bagua 8s;
-webkit-animation:bagua 8s liner 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;
border-radius: 50%;
/* animation:bagua 8s;
-webkit-animation:bagua 8s liner infinite normal ;*/
}
</style>
</head>
<body>
<div id="mydiv">
<div id="div">

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

时间： 2024-08-02 11:31:53

八卦图绕圆旋转的相关文章

八卦图绕矩形旋转移动

<!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) rotat

使用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 坎:黑白

如何用几何画板画绕点旋转动画

作为21世纪的动态几何工具,几何画板完美地实现了动态教学,可以用它给学生们演示图形的运动过程和状态,比如可以实现某平面图形围绕一个点做旋转动画,那么具体要怎么做呢? 以制作"三角形绕平面上任意一点旋转的动画"为例,具体的操作步骤如下: 步骤一 打开教学课件制作软件几何画板,使用左侧"线段工具"绘制任意三角形ABC,然后使用"点工具"在三角形外绘制任意一点O,双击点O,标记为旋转中心: 步骤二 点击上方的"数据"菜单,在下拉菜单