话不多说，直接上代码：

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. Android Studio连接数据库实现增删改查

    源代码如下: DBUtil.java: package dao; import java.sql.Connection; import java.sql.DriverManager; import j ...

  2. 【av68676164（p33-p34)】进程通信

    4.7.1 匿名管道通信 任务:把一个CMD控制台程序改成窗口程序 "算命大师"程序的改进版 改进目标:标准的Windows窗口程序 (匿名)管道通信机制 管道定义 pipe 定义 ...

  3. SpringCloud系列之API网关(Gateway)服务Zuul

    1.什么是API网关 API网关是所有请求的入口,承载了所有的流量,API Gateway是一个门户一样,也可以说是进入系统的唯一节点.这跟面向对象设计模式中的Facet模式很像.API Gatewa ...

  4. C#算法设计之知识储备

    前言 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/669 访问. 算法的讨论具有一定的规则,其中也包含一些不成文的约定 ...

  5. linux下免密登录配置

    1.首先大家先开三台虚拟机 2.回到首层. 2.1:编辑文件:    vim /etc/ssh/sshd_config 3:在master的linux上生成ssh密钥: ssh-keygen -t r ...

  6. name 'xrange' is not defined

    出现这个错误是因为examples使用的是Python2 在Python3中,移除了在Python2中的range, 并将 xrange 命名为 range 将代码中的xrange改为range就可以 ...

  7. 5分钟快速了解MySQL索引的各种类型

    文章持续更新,微信搜索「万猫学社」第一时间阅读. 关注后回复「电子书」,免费获取12本Java必读技术书籍. 什么是索引? 索引是数据库存储引擎用于快速查找到指定数据的一种数据结构. 可以用新华字典做 ...

  8. 当Notification和Websocket遇到https、http

    @ 目录 一.http转为https请求 (1)生成证书1(crt证书转tomcat使用的jks) (2)配置证书1 (3)生成证书2 (4)配置证书2 二.Websocket改为https连接 后言 ...

  9. 已废弃_CSDN慕零的黑夜-头条-第一期(必问)[导读:]1.CSDN必问赏金流向何方 2.CSDN必问偷偷做的手脚 3.CSDN必问靠谱吗 4.关于钱于回答的平衡问题:一美元拍卖骗局qq3461896724

    [本文有已知的链接差错,懒得改了] 本期是关于CSDN 必问 (biwen.csdn.net)的内容,欢迎评论文末,文中插入有 小姐姐 img(附py代码,1.49G) + coding资料 哟~~~ ...

  10. Jmeter 常用函数（8）- 详解 __MD5

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 将指定的字符串 MD5 加密并返回,加 ...