<!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. Eclipse中出现Select at least one project解决办法

    今天遇到个问这个问题的,顺便帮解决了,是在导入工程的时候出现的,这是因为有同名的工程的,进入windows->show view->project explorer 这里找出来删掉再导入工 ...

  2. linux 查看用户所在组（groups指令的使用） 含实例

    经常将某个文件夹的权限赋给某个用户的时候,也需要配置该用户所在的组,因此,我们需要查看该用户有哪些组,我们可以使用如上命令查看用户所在组 [oracle@gl ~]$ vi /etc/group ro ...

  3. IE兼容性问题解决方案3--css中的overflow

    overflow:hidden:IE8下没效果? width:100%;IE6.7.8下必须有宽带,而且不能是auto: weight:auto; overflow-x:scroll; overflo ...

  4. 【转】getopt分析命令行参数

    (一) 在Linux中,用命令行执行可执行文件时可能会涉及到给其加入不同的参数的问题,例如: ./a.out -a1234 -b432 -c -d 程序会根据读取的参数执行相应的操作,在C语言中,这个 ...

  5. [解决]Kali Linux DHCP自动获取IP失败 坑爹的VMWare桥接

    root@kali:~# service networking restart [....] Running /etc/init.d/networking restart is deprecated ...

  6. ZOJ-3593 One Person Game 概率DP

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3593 带环的概率DP一般的做法是求出转移方程,然后高斯消元解方程 ...

  7. Ubuntu 固态硬盘 4K对齐及启用 Trim，及其验证方法

    因为之前一个移动硬盘因为坏道蔓延导致没办法继续使用,我略冲动地跑去买了一块 120GB 的三星840 固态硬盘回来.为了使用起来更方便,还去弄了个光驱位硬盘托架,把固态硬盘接在了光驱位与原本的笔记本硬 ...

  8. PC问题-使用BAT方法清理Delphi临时文件

    @echo offdel /S *.~*del /S *.dcudel /S *.dskdel /S *.hppdel /S *.ddpdel /S *.mpsdel /S *.mptdel /S * ...

  9. Umbraco中的权限体系结构

    分为管理用户体系,和成员用户体系,也就是 Users(用户)和Members(成员). 2.1. Users(用户) 用户是对功能操作权限定义的,首先看一下所有Action的Permissions: ...

  10. 《Effect Java》 归纳总结

    目录: 一.创建和销毁对象 (1 ~ 7) 二.对于所有对象都通用的方法 (8 ~ 12) 三.类和接口 (13 ~ 22) 四.泛型 (23 ~ 29) 五.枚举和注解 (30 ~ 37) 六.方法 ...