<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #container{height: 202px;width: 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100px auto;

            background: linear-gradient(90deg,black 50%,white 50%);}

        #top,#bottom{height: 100px;width: 100px;margin: 0 auto;border-radius: 100px}

        #top{border: 1px solid white;}

        #bottom{border: 1px solid black;}

        #inner1,#inner2{height:50px;width: 50px;margin: 25px  auto;border-radius: 50px; }

        #inner1{background: black}

        #inner2{background: white}

        #top{background: white}

        #bottom{background: black}

        @keyframes bonce{

            0%{transform: rotate(0deg)}

            100%{transform: rotate(360deg)}

        }

        #container{animation-name: bonce;animation-duration: 5s;animation-iteration-count: 100;animation-timing-function: linear;}

    </style>

</head>

<body>

<div id="container">

    <div id="top">

        <div id="inner1"></div>

    </div>

    <div id="bottom">

        <div id="inner2"></div>

    </div>

</div>

</body>

</html>

就是还没搞清楚inner1、inner2的border如果取消的话就会发生偏移，容我再研究。

CSS3 旋转的八卦图的更多相关文章

  1. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  2. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  6. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  7. 使用CSS达到阴阳八卦图等图形

    CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  8. canvas画布——画八卦图

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  9. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

随机推荐

  1. 我的Modbus Slave/Client开发历程（Rtu/AscII/Tcp）

    我的Modbus Slave/Client开发历程(Rtu/AscII/Tcp) 分类: [自动化]2007-07-19 10:04 34038人阅读 评论(38) 收藏 举报 vb嵌入式dostcp ...

  2. 数列极限---和Gauss(取整)函数有关

  3. the type initializer for '' threw an exception

    the type initializer for '' threw an exception 问题:程序启动时初始化主窗口类时,弹出该错误.调查:查看类的构造函数是否会有异常抛出.解决:去掉类的构造函 ...

  4. STM32 串口DMA方式接收（转）

    STM32 是一款基于ARM Cortex-M3内核的32位MCU,主频最高可达72M.最近因为要在车机上集成TPMS功能, 便开始着手STM32的开发工作,STM32F10x系列共有5个串口(USA ...

  5. Win10系统安装

    2016正月十一来到了学校,刚刚拿到了姐姐的thinkpad,到学校来想重新安装一下系统并且重新磁盘分区. 上一次也安装过win10,不过基本方法已经忘了,制作的U启动盘也不在了. 首先按照http: ...

  6. 【转】SQL中Group By的使用

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...

  7. 【转】shell中IFS用法

    http://blog.itpub.net/27181165/viewspace-775820/ 一 IFS的介绍   Shell 脚本中有个变量叫IFS(Internal Field Seprato ...

  8. HDU-4696 Answers 纯YY

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4696 题意:给一个图,每个点的出度为1,每个点的权值为1或者2.给n个询问,问是否能找到一条路径的权值 ...

  9. 如何利用多核CPU来加速你的Linux命令

    原文出处: rankfocus   译文出处: 外刊IT评论 你是否曾经有过要计算一个非常大的数据(几百GB)的需求?或在里面搜索,或其它操作——一些无法并行的操作.数据专家们,我是在对你们说.你可能 ...

  10. leptonica 学习笔记2——pixBackgroundNormSimple

    1 pixBackgroundNormSimple 函数功能:自适应背影标准化 位置:adampmap.c /*-------------------------------------------- ...