<!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. 说下 winOS / IOS / android /Linux 视频、音频 编码解码问题

    最近有朋友遇到一个问题, ios 上传视频文件,想在本地压缩下,然后再上传到服务器. 问有没有什么 视频处理的库, 最近Khronos的webgl 支持HTML5 ,(原理 WebGL 是openGL ...

  2. Java序列化 如何把多个对象存储在一个文件中

    /** * 用于保存模板文件,内容包括: * 1,标志位,1 int * 2,版本   1 int * 3,数据头长度 1 int * 4,预留数据头空间  5120 byte * 5,后续数据长度  ...

  3. SQL注入攻击的种类和防范手段

    观察近来的一些安全事件及其后果,安全专家们已经得到一个结论,这些威胁主要是通过SQL注入造成的.虽然前面有许多文章讨论了SQL注入,但今天所讨论的内容也许可帮助你检查自己的服务器,并采取相应防范措施. ...

  4. POJ 2001 字典树（入门题）

    #include<cstdio> #include<algorithm> #include<iostream> #include<cstring> #i ...

  5. V&View更新

    这几天一直在做V&View的更新工作,这次的更新是质的变化,表面界面变化不大,可是内部确有着翻天覆地的改变. 这几天我主要做了一下几件事: 1. 重新构思了vview的文章发布形式,之前使用k ...

  6. HDU-4691 Front compression 后缀数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4691 后缀数组模板题,求出Height数组后,对Height做RMQ,然后直接统计就可以了... // ...

  7. Android开发--ListPreferance 运行报错：android.preference.ListPreference.findIndexOfValue(ListPreference.java:169)

    在Stack Overflow上找到的答案:http://stackoverflow.com/questions/4357094/exception-on-listpreferences “i fix ...

  8. notepad 如何同时选中同一列的数据 Alt

    有时会经常遇到这种情况, 我们要选中数据中的某一列,这个在记事本中是实现不了的,不过我们可以用更高级一点的编辑器. 使用notepad可以帮助我们解决这个问题哦! 操作方法就是 按下ALT键 然后再去 ...

  9. SQL2008--行号的得到

    WITH DataTable AS( select *, ROW_NUMBER() OVER(order by ID) as Rowno from (select * from UserInfo) a ...

  10. ScrollView详解

    创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: 1 2 3 CGRect bounds = [ ...