话不多说，直接上代码：

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. Linux学习笔记之linux的文件目录结构

    Linux环境下,一切皆文件! linux和windows系统有区别, windows是在各个硬盘上进行分区,分区里面又有好多文件, 而linux是采用树状的目录结构,所有都在根目录  /  下,所有 ...

  2. JS 鼠标、键盘事件对象

    鼠标事件对象     mouseEvent鼠标事件对象     e.clientX 在可视区的x和y的坐标     e.pageX 在页面文档的X和Y的坐标 <script> docume ...

  3. C#-Func<>

    与C#-Action十分相似, Func<> 也是c#内置的委托类型,不同的是, Func<> 只能用来引用具有返回值的方法,也就是说,在使用它时,至少需要在尖括号内指定一种类 ...

  4. 字节跳动：[编程题]万万没想到之聪明的编辑 Java

    时间限制:1秒 空间限制:32768K 我叫王大锤,是一家出版社的编辑.我负责校对投稿来的英文稿件,这份工作非常烦人,因为每天都要去修正无数的拼写错误.但是,优秀的人总能在平凡的工作中发现真理.我发现 ...

  5. java流程控制语句if

    一 if语句 if语句是指如果满足某种条件,就进行某种处理. 格式: if (条件语句){ 执行语句; …… } 流程图: 例如: public class IfDemo01 { public sta ...

  6. JavaScript 循环数组的时候调用方法中包含Promise的时候如何做到串行

    forEach是不能阻塞的, 默认[并行]方式 const list = [1, 2, 3] const square = num => { return new Promise((resolv ...

  7. 怎么写简历，简历才不会被丢到非洲&#127757;

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近的三歪朋友圈可以看到很多的字节.腾讯的同学都 ...

  8. Caused by: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for

    Caused by: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value f ...

  9. WKWebView 网络请求Header 丢失

    WKWebView 是苹果手机上主要的H5加载控件,它相比UIWebView 有诸多优势.在次不做比较,但是它的坑缺比较多.网上也有很多的例子但是做的比较好的真不多,我在这里推荐俩博客供大家参考.ht ...

  10. 【算法•日更•第三十七期】A*寻路算法

    ▎写在前面 这是一种搜索算法,小编以前总是念成A乘寻路算法,没想到一直念错. 请大家都念成A星寻路算法,不要像小编一样丢人了. ▎A*寻路算法 ☞『引入』 相信大家都或多或少的玩过一些游戏吧,那么游戏 ...