话不多说，直接上代码：

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. 密码学系列——常见的加密方式（c#代码实操）

    前言 说起加密方式,其实密码学的角度ASCII编码其实本身就是一种加密解密. 由于其公开,现在用于数字与字符的转换. 查看ASCII表可以去官网查查. 转换代码如下: static void Main ...

  2. 在Springboot中写使用jsp

    jsp其实可以看成一种模板语言,在Springboot中我们同样可以使用jsp.我们可以把引入jsp的过程分为三步: 第一步:POM文件加依赖: <!--引入springboot内嵌的tomca ...

  3. java循环语句for与无限循环

    一 for循环 for循环语句是最常用的循环语句,一般用在循环次数已知的情况下. 格式: for(初始化表达式; 循环条件; 操作表达式){ 执行语句 ……… } 循环流程: for(① ; ② ; ...

  4. C#设计模式之17-中介者模式

    中介者模式(Mediator Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/419 访问. 中介者模式 ...

  5. 精讲RestTemplate第6篇-文件上传下载与大文件流式下载

    本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...

  6. 炼技术(9): 简约而不简单，永不停歇的测试 -- always_run

    最强战力,永不停歇的测试:always_run 许多工程师写完程序后,都不愿意对自己的程序做仔细测试. 很多测试说会做自动化测试,可能工作好几年都没真做过多少自动化测试. 我们的解决方案是,在系统的测 ...

  7. 带你用 Python 实现自动化群控设备

    1. 前言 群控,相信大部分人都不会陌生!印象里是一台电脑控制多台设备完成一系列的操作,更多的人喜欢把它和灰产绑定在一起! 事实上,群控在自动化测试中也被广泛使用!接下来的几篇文章,我将带大家聊聊企业 ...

  8. 【Gin-API系列】Gin中间件之日志模块（四）

    日志是程序开发中必不可少的模块,同时也是日常运维定位故障的最重要环节之一.一般日志类的操作包括日志采集,日志查询,日志监控.日志统计等等.本文,我们将介绍日志模块在Gin中的使用. Golang如何打 ...

  9. unity探索者之复制内容到剪贴板

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/8417014.html unity中提供的TextEditor类,只能在window ...

  10. idea配置ssm框架

    详细教程如下:https://blog.csdn.net/GallenZhang/article/details/5193215 https://blog.csdn.net/qq_28008917/a ...