话不多说，直接上代码：

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. 全球疫情爬取APP版

    全球疫情统计APP图表展示: 将该任务分解成三部分来逐个实现: ①爬取全球的疫情数据存储到云服务器的MySQL上 ②在web项目里添加一个servlet,通过参数的传递得到对应的json数据 ③设计A ...

  2. 安卓APP开发的初步了解

    今天成功安装了Android Studio 并且对APP的开发框架结构进行了初步了解 如上图:app基本结构情况 下面来仔细解释一下各个方面目录的作用 首先 manifests目录:包含Android ...

  3. 一招教你如何在Python中使用Torchmoji将文本转换为表情符号

    很难找到关于如何使用Python使用DeepMoji的教程.我已经尝试了几次,后来又出现了几次错误,于是决定使用替代版本:torchMoji. TorchMoji是DeepMoji的pyTorch实现 ...

  4. Axios源码分析

    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 文档地址:https://github.com/axios/axios axios理解和使用 1.请求配置 { // ...

  5. C# ASP 异步存储数据

    1.异步委托 在导航栏接收到提交的请求后,调用个各子画面的保存答案方法,之后实例化委托 saveToDB . 当执行BeginInvoke后,服务器会另起线程执行saveToDB里的的方法,因为这里要 ...

  6. Q#–一个新年愿望清单

    本文章为机器翻译.https://blogs.msdn.microsoft.com/visualstudio/2018/12/24/qsharp-wish-list-for-new-year/# 在以 ...

  7. python关于函数调用作为参数的说明&&装饰器

    python关于函数调用作为参数的说明&&装饰器 简单的: 先看代码: def out(): print('out') def inner(): return 'inner' retu ...

  8. 一个简单的RPC框架实现

    package com.rpc; public interface EchoService { String echo(String ping); } package com.rpc; public ...

  9. 开发APP遇到的问题

    1.代码尽量复用 2.调用高德地图,直辖市等,省字段一定有值,市可能为空(pro:'北京市',city:[]) 3.支付密码不用组件 <template> <view> < ...

  10. springMVC入门（二）------springMVC入门案例

    简介 本案例主要完成了springMVC的基本配置,可针对响应的HTTP URL返回数据与视图 一.###web.xml的配置 要使springMVC生效,首先需要对web.xml进行配置,配置spr ...