话不多说，直接上代码：

HTML代码部分：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>太极八卦图案例</title>
  6.          <link rel="stylesheet" type="text/css" href="buguaStyle.css" />
  7.      </head>
  8.      <body>
  9.          <div class="background">    <!--主要是用到了定位，还有动画 -->
  10.              <div class="box">
  11.                  <div class="Black"></div>
  12.                  <div class="White"></div>
  13.                  <div class="medium_black"></div>
  14.                  <div class="medium_white"></div>
  15.                  <div class="little_black"></div>
  16.                  <div class="little_white"></div>
  17.              </div>
  18.          </div>
  19.      </body>
  20.  </html>

这里是css代码部分：

  1.  *{    /*css代码上来必须写的*/
  2.      padding:;
  3.      margin:;
  4.      list-style: none;
  5.  }
  6.  .background{
  7.      width: 100%;
  8.      height: 100%;
  9.      background: darkgray;
  10.      position: fixed;
  11.      /*定位  ->    absolute(生成绝对定位元素，相对于父级元素进行定位)
  12.                  fixed（生成绝对定位元素，相对于浏览器窗口进行定位）
  13.                  relative（生成相对定位元素，相对于其正常位置进行定位）*/
  14.  }
  15.  .box{
  16.      width: 400px;
  17.      height: 400px;
  18.      border-radius:50%;
  19.      position: absolute;    /*因为父级元素有了定位，所以这里用absolute*/
  20.      top:;                /*上、下、左、右四个属性值来实现元素位置的改变*/
  21.      bottom:;
  22.      left:;
  23.      right:;
  24.      margin: auto;
  25.      animation:run 5s infinite linear;
  26.  }
  27.  .Black{
  28.      width: 200px;
  29.      height: 400px;
  30.      background: black;
  31.      border-radius: 200px 0 0 200px;        /*形成一个黑色的左半圆*/
  32.      position: absolute;
  33.  }
  34.  .White{
  35.      width: 200px;
  36.      height: 400px;
  37.      background: white;
  38.      border-radius:0 200px 200px 0;        /*形成一个白色的左半圆*/
  39.      left: 200px;
  40.      position: absolute;
  41.  }
  42.  .medium_black{
  43.      width: 200px;
  44.      height: 200px;
  45.      background: black;
  46.      border-radius: 50%;
  47.      position: absolute;
  48.      left:;
  49.      right:;
  50.      margin: auto;
  51.      bottom:;    /*四个属性实现了中等大小的圆在最xia边的中间的位置*/
  52.  }
  53.  .medium_white{
  54.      width: 200px;
  55.      height: 200px;
  56.      background: white;
  57.      border-radius: 50%;
  58.      position: absolute;
  59.      left:;
  60.      right:;
  61.      margin: auto;
  62.      top:;    /*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/
  63.  }
  64.  .little_black{
  65.      width: 100px;
  66.      height: 100px;
  67.      background: black;
  68.      border-radius: 50%;
  69.      position: absolute;
  70.      left:;
  71.      right:;
  72.      margin: auto;
  73.      top: 50px;
  74.  }
  75.  .little_white{
  76.      width: 100px;
  77.      height: 100px;
  78.      background: white;
  79.      border-radius: 50%;
  80.      position: absolute;
  81.      left:;
  82.      right:;
  83.      margin: auto;
  84.      bottom: 50px;
  85.  }
  86.  @keyframes run{
  87.      from{
  88.          transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/
  89.      }
  90.      to{
  91.          transform: rotate(360deg);
  92.      }
  93.  }

总结：

主要是用到了定位（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. ZoneJS 的原理与应用

    目录 序言 Zone 是什么 ZoneJS 的原理 ZoneJS 的应用场景 参考 1. 序言 ZoneJS 是 Angular 团队受到 Dart 的 Zone 的启发,为 Angular v2 及 ...

  2. PowerJob 的自实现高可用方案，妙妙妙！

    本文适合有 Java 基础知识的人群 作者:HelloGitHub-Salieri HelloGitHub 推出的<讲解开源项目>系列. 碎碎念 高可用放到今天已经不是一个新颖的词汇了,怎 ...

  3. Express Response 之 end /send 傻傻分不清楚

    Express是一个轻量的经典的Node.js开启服务和快速路由管理的库.开启服务的方式也是非常的简单 只需要简单的,安装 $ npm install express   -------> 引入 ...

  4. java jsp实现网络考试系统（mysql）

    java网络考试系统 功能:可进行学生.管理员登录,学生考试.管理员出卷.列表分页 @ 目录 java网络考试系统 实现效果 主要代码实现 写在最后 实现效果 主要代码实现 package cn.it ...

  5. 【NOI2014】魔法森林 - 动态加边SPFA

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...

  6. GUAVA-ListenableFuture实现回调

    随着软件开发的不断进步,在实际的开发应用中,可能一次请求需要查询若干次数据库或者调用若干次第三方,按照传统的串行执行的话,会大大增加响应时间,无法满足业务需求,更无法满足用户迫切需要响应迅速的愿望.对 ...

  7. python爬虫抖音 个人资料 仅供学习参考 切勿用于商业

    本文仅供学习参考 切勿用于商业 本次爬取使用fiddler+模拟器(下载抖音APP)+pycharm 1. 下载最新版本的fiddler(自行百度下载),以及相关配置 1.1.依次点击,菜单栏-Too ...

  8. 数据恢复----重组raid5解析

    重组Raid5 第一步:判断RAID5条带大小 利用winhex同时打开6个物理镜像每块成员盘中的$MFT文件记录(16进制搜索“46494c45”),并且保证找到的文件记录在每块物理盘的同一扇区(在 ...

  9. 推荐一看的blog

    不同专题: 个人blog cnblogs.com/MiLog cnblogs.com/Dway (指DeepWay) cnblogs.com/muly 建议一看,主要发布在cnblogs.com/dl ...

  10. markdown 绘图利器之granphviz

    目录 概述 graphviz 脚本语法结构 图 方向,尺寸,间距 节点 shape 属性 多边形 record-based 的形状 用户定制 label 属性 基本用法 HTML用法 style 属性 ...