<!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. 将java应用程序打包成可执行文件

    准备工作:我用的打包软件是installanywhere.因此要先下载这个软件,这里提供一个下载地址http://www.52z.com/soft/21747.html.(网页上写的有破解方法) 详细 ...

  2. 本地连接图标消失；修改地址IP地址

    (1)网络连接中没有本地连接,电脑无法进行拨号.无法上网,右键点击“网上连接”选择“属性”,弹出的“网络连接”文件夹中没有本地连接的图标,类似情况处理起来要相对复杂些了,我们逐一判断故障原因,在想办法 ...

  3. centos vpn client set

    http://my.oschina.net/fishman/blog/96227 先检查服务器是否安装过 ppp, pptp, pptp-setup, 如果没有, yum -y install  安装 ...

  4. VTK三维重建(2)-根据脚部骨骼CT的三维重建和显示

    [效果演示] 根据脚部的骨骼CT扫描的照片,利用VTK完成读取和三维重建. [程序实现] void main () { vtkRenderer *aRenderer = vtkRenderer::Ne ...

  5. minicom 没有tx 信号

    在minicom -s 的配置中:——> Serial port setup -->  选择F - Hardware Flow Control : No默认是yes, 但是没有tx信号输出 ...

  6. 【OpenGL】入门

    根据OpenGL蓝宝书(OpenGL超级宝典)来入门,写的比较细,易懂,这里给我贴代码和记录零碎的事儿用 第一个代码 #include <gl/glut.h> void RenderSce ...

  7. Spring MVC整合logback日志框架实战

    1.引入依赖,本项目maven构建,普通项目导入想要的jar包即可 版本 <properties> <slf4j-api.version>1.7.7</slf4j-api ...

  8. Linux更改默认jdk

    RHEL默认安装Open JDK--java-1.6.0-openjdk-1.6.0.0-1.66.1.13.0.el6.x86_64,现在要换成Oracle JDK1.7.0_51 1. (可选)删 ...

  9. 洛谷 P1373 小a和uim之大逃离

    2016-05-30 12:31:59 题目链接: P1373 小a和uim之大逃离 题目大意: 一个N*M的带权矩阵,以任意起点开始向右或者向下走,使得奇数步所得权值和与偶数步所得权值和关于K的余数 ...

  10. BNUOJ-26482 Juice 树形DP

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26482 题意:给一颗树,根节点为送电站,可以无穷送电,其它节点为house,电量达到pi时 ...