经常看到旋转八卦图，所以亲自动手用css写了一个，兼容方面还未做处理
原理很简单，先画好八卦图后，旋转即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{height: 200px;width: 200px;border-radius: 202px;box-shadow: 0 0 4px #666666;margin: 100px auto;
background: linear-gradient(90deg,black 50%,white 50%);}
#top,#bottom{height: 75px;width: 100px;padding-top:25px;margin: 0 auto;border-radius: 100px}
#inner1,#inner2{height:50px;width: 50px;margin: 0 auto;border-radius: 50px; }
#inner1{background: black}
#inner2{background: white}
#top{background: white}
#bottom{background: black}
@keyframes bonce{
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
#container{animation-name: bonce;animation-duration: 5s;animation-iteration-count: 100;animation-timing-function: linear;}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="inner1"></div>
</div>
<div id="bottom">
<div id="inner2"></div>
</div>
</div>
</body>
</html>
.
相关推荐
### 利用HTML和CSS制作一个可旋转的八卦图 #### 一、项目背景与目标 本项目旨在通过HTML和CSS技术实现一个可交互式的八卦图。八卦图是中国古代哲学中的一个重要符号，常用于易经等传统学问之中，象征着宇宙万物的...
为了用CSS实现八卦图，我们可以采用SVG（Scalable Vector Graphics）元素结合CSS3的属性来绘制。 1. **SVG基础**：SVG是一种基于XML的矢量图像格式，支持动态内容和交互性。我们可以在HTML文档中内联SVG代码，或者...
是用HTML、CSS代码来实现2D旋转，用定位和动画做出八卦图自动旋转，鼠标经过停止，鼠标离开，继续旋转。
css3动画效果实现太极旋转效果，配合border实现，无图片
总之，这个纯CSS3实现的3D阴阳八卦图旋转动画效果，不仅展示了CSS3的创新特性，也为开发者提供了一个学习和实践CSS3动画和3D变换的实例。通过深入研究和理解这个源码，开发者可以提升在网页动画和交互设计方面的技能...
在这里，罗盘的旋转效果就是通过`rotate()`函数实现的，可以设定一个角度值，使得八卦图能够按照预设的速度和方向转动。 2. **过渡（Transitions）**：`transition`属性定义了元素从一种状态到另一种状态时的动画...
这个“CSS3风水罗盘旋转动画特效”是一个利用CSS3特性和技术实现的创新视觉效果，它模拟了中国传统风水学中的乾坤八卦罗盘，通过动态旋转来吸引用户注意力并提升用户体验。 首先，我们要理解CSS3的关键帧动画（@...
阴阳太极图是中华文化中的一个重要符号，象征着宇宙万物的平衡与对立统一，而在网页设计中，通过CSS3实现这一动画效果，可以为用户带来视觉上的独特体验。 首先，要理解CSS3的关键帧动画（@keyframes）是实现这一...
在这款插件中，八卦图被用作背景，可能以旋转或动态变化的形式展示，为网页带来一种神秘且富有深意的视觉效果。 接着，我们来看“算风水时钟”这一概念。风水是中国传统的环境学说，注重空间布局对人的影响。在这个...
开发者可能使用了`canvas`的绘图API，如`fillRect()`、`strokeRect()`等方法来绘制八卦图的各个部分。 2. `<audio>`和`<video>`元素：虽然“八卦阵”项目主要涉及图形展示，但HTML5的多媒体元素也可能用于增强用户...
3. **动画（Animation）**：CSS3的`@keyframes`规则允许创建自定义动画，这在风水罗盘中可用于制作指针自动旋转的效果，或者在特定条件下触发的特殊动画。 4. **伪类和伪元素（Pseudo-classes & Pseudo-elements）*...
3. **images**：这是一个包含图片资源的文件夹，可能包含八卦图的各个卦象、时钟指针等图像，这些图像通过CSS或JavaScript进行定位和展示，为时钟增添视觉效果。 4. **js**：这个文件夹中的JavaScript代码是项目的...
这个特效采用了类似八卦图的设计，通过动态的圆盘旋转来呈现时间，使得网页上的时钟更加吸引眼球，同时也展现了CSS3的强大功能和无限可能性。 在CSS3中，这种圆盘动画主要依赖于以下几个关键的技术点： 1. **变换...
【标题】：“html-css-js-demos:用ccs3制作一个八卦图”指的是一个使用HTML、CSS和JavaScript技术实现的在线示例项目，其目的是创建一个具有八卦样式布局的图形。八卦图通常由八片相互连接的扇形区域组成，常常用于...
这些类用于绘制八卦镜中的圆形元素，如八卦图、十二生肖等。通过设置`border-radius:50%;`，使这些元素呈现出圆形的外观。 #### 四、总结 通过以上分析可以看出，CSS是一种非常强大的工具，不仅能够实现网页的基本...
在创建实心罗盘时钟特效时，CSS可以用来设置时钟的背景、边框、阴影、字体等属性，以及利用`transform`属性实现指针的旋转效果。例如，`transform: rotate(角度)`可以控制元素围绕其原点旋转一定的角度。 3. **...
此外，CSS3的transform属性可能被用来实现旋转效果，使八卦图的卦象按照特定角度排列。 JavaScript是一种常用的客户端脚本语言，常与HTML和CSS配合使用，为网页添加交互性。在"bagua"项目中，JavaScript可能被用来...
八卦图可以视为两个叠加的圆形和其中的阴鱼和阳鱼。可以通过 SVG 或者 CSS 来实现，这里给出一个简单的 CSS 示例： ```css .guabao { width: 100px; height: 100px; position: relative; } .guabao .yin { ...
5. **径向渐变（Radial Gradients）**：可以使用CSS3的径向渐变来为数字时钟添加背景效果，模拟出八卦图的环状视觉。 6. **响应式设计**：为了确保在不同设备和屏幕尺寸上都能正常显示，需要利用媒体查询（`media ...