话不多说，直接上代码：

HTML代码部分：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>太极八卦图案例</title>

         <link rel="stylesheet" type="text/css" href="buguaStyle.css" />

     </head>

     <body>

         <div class="background">    <!--主要是用到了定位，还有动画 -->

             <div class="box">

                 <div class="Black"></div>

                 <div class="White"></div>

                 <div class="medium_black"></div>

                 <div class="medium_white"></div>

                 <div class="little_black"></div>

                 <div class="little_white"></div>

             </div>

         </div>

     </body>

 </html>

这里是css代码部分：

 *{    /*css代码上来必须写的*/

     padding:;

     margin:;

     list-style: none;

 }

 .background{

     width: 100%;

     height: 100%;

     background: darkgray;

     position: fixed;

     /*定位  ->    absolute(生成绝对定位元素，相对于父级元素进行定位)

                 fixed（生成绝对定位元素，相对于浏览器窗口进行定位）

                 relative（生成相对定位元素，相对于其正常位置进行定位）*/

 }

 .box{

     width: 400px;

     height: 400px;

     border-radius:50%;

     position: absolute;    /*因为父级元素有了定位，所以这里用absolute*/

     top:;                /*上、下、左、右四个属性值来实现元素位置的改变*/

     bottom:;

     left:;

     right:;

     margin: auto;

     animation:run 5s infinite linear;

 }

 .Black{

     width: 200px;

     height: 400px;

     background: black;

     border-radius: 200px 0 0 200px;        /*形成一个黑色的左半圆*/

     position: absolute;

 }

 .White{

     width: 200px;

     height: 400px;

     background: white;

     border-radius:0 200px 200px 0;        /*形成一个白色的左半圆*/

     left: 200px;

     position: absolute;

 }

 .medium_black{

     width: 200px;

     height: 200px;

     background: black;

     border-radius: 50%;

     position: absolute;

     left:;

     right:;

     margin: auto;

     bottom:;    /*四个属性实现了中等大小的圆在最xia边的中间的位置*/

 }

 .medium_white{

     width: 200px;

     height: 200px;

     background: white;

     border-radius: 50%;

     position: absolute;

     left:;

     right:;

     margin: auto;

     top:;    /*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/

 }

 .little_black{

     width: 100px;

     height: 100px;

     background: black;

     border-radius: 50%;

     position: absolute;

     left:;

     right:;

     margin: auto;

     top: 50px;

 }

 .little_white{

     width: 100px;

     height: 100px;

     background: white;

     border-radius: 50%;

     position: absolute;

     left:;

     right:;

     margin: auto;

     bottom: 50px;

 }

 @keyframes run{

     from{

         transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/

     }

     to{

         transform: rotate(360deg);

     }

 }

总结：

主要是用到了定位（position），要熟悉定位的三个常用属性。

css实例——“旋转”太极八卦图的更多相关文章

  1. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  2. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

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

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

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

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

  6. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  7. canvas画布——画八卦图

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  8. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  9. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

随机推荐

  1. 第一次MySQL的SQL注入实验

    测试平台:https://www.mozhe.cn/news/detail/324 上完SQL注入的第一节课过来对着笔记一步一步来做.. 1.首页面上没有id=XXX的东西,看见“平台维护通知”,点开 ...

  2. 【模式识别与机器学习】——PCA主成分分析

    基本思想 其基本思想就是设法提取数据的主成分(或者说是主要信息),然后摒弃冗余信息(或次要信息),从而达到压缩的目的.本文将从更深的层次上讨论PCA的原理,以及Kernel化的PCA. 引子 首先我们 ...

  3. 2020-06-02：千万级数据量的list找一个数据。

    福哥答案2020-06-02: 对于千万级长度的数组单值查找:序号小的,单线程占明显优势:序号大的,多线程占明显优势.单线程时间不稳定,多线程时间稳定. go语言测试代码如下: package mai ...

  4. notepad++ 设置支持golang语法高亮

    see https://stackoverflow.com/questions/27747457/golang-plugin-on-notepad

  5. 论如何实现最强大脑黑白迭代（c++附代码）

    最近看了最强大脑,对节目中的黑白迭代很感兴趣,就自己写了一个500多行的程序.燃鹅,只实现了一部分功能,还非常简陋.无奈之下,我只好从网上下载了一份代码,然后自己稍加修改就成了一份半改编的代码. 虽然 ...

  6. C#图解教程(第四版)—01—类型，存储，变量

    3.1 如何广泛的描述C#程序 可以说C程序是一组函数和数据类型,C++程序是一组函数和类,然而C#程序是一组类型声明 3.2 类型 可以把类型想象成一个用来创建数据结构的模板,模板本身并不是数据结构 ...

  7. troubleshoot之:GC调优到底是什么

    目录 简介 那些GC的默认值 GC的选择 GC的最大线程个数 初始化heap size 最大的heap size 分层编译技术 我们到底要什么 最大暂停时间 吞吐率 简介 我们经常会听到甚至需要自己动 ...

  8. pyttsx3 的使用教程

    import pyttsx3 def use_pyttsx3(): # 创建对象 engine = pyttsx3.init() # 获取当前语音速率 rate = engine.getPropert ...

  9. Unix I/O

    Unix I/O 打开文件 一个应用程序通过要求内核打开相应的文件,来宣告它想要访问一个I/O设备.内核返回一个小的非负整数,叫做描述符,它在后续对此文件的所有操作中标识这个文件.内核记录有关这个打开 ...

  10. 团队作业3：需求改进&系统设计（歪瑞古德小队）

    目录 一.需求&原型改进 1.1 用户需求调查 1.2 选题需求改进 1.3 功能分析的四个象限 1.4 完善需求规格说明书 1.5 任务分解WBS调整 1.6 项目进度计划调整 二.后端架构 ...