<!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. tpl + ccr

    不是非此即彼的场景.如下混合使用CCR+TPL的代码说明问题:It's not an either/or scenario.You can intermix CCR and TPL code like ...

  2. qtp不识别树结构中的点击事件

    qtp不识别树结构中的点击事件,未生成该点击事件的脚本,解决办法: 1.未生成点击"auto分类c1"的脚本 2.点击1.对象库-2.添加对象库-3.选中对象-点击OK,即将该对象 ...

  3. 面向对象基础（class0425)字符串与集合

    常用类库 学习.net就是学习它的无数个类库怎么用,先看两个简单的 String 字符串,不可变特性.字符串可以看成字符数组 属性 Length 方法 IsNullOrEmpty() 静态方法 ToC ...

  4. 在LinearLayout中实现列表,列表采用LinearLayout横向布局-android学习

    不多讲直接上代码 1.Activity 对应的布局文件如下: <?xml version="1.0" encoding="utf-8"?> < ...

  5. bzoj 1095 [ZJOI2007]Hide 捉迷藏（括号序列+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1095 [题意] 给定一棵树,树上颜色或白或黑而且可以更改,多个询问求最远黑点之间的距离 ...

  6. HDU-4671 Backup Plan 构造解

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4671 假设是3 m,首先按照第一列按照1 2 3 1 2 3 1...排下去,然后个数就是一个 (m/ ...

  7. UITableView性能优化

    关于UITableView的性能优化,网络上也有一些总结.在这里就介绍下我们项目中遇到的问题以及对应的解决方法.相信我们遇到的问题也有一定的普适性,能够作为其他问题的优化方案. Instruments ...

  8. 支持Git的代码托管网站

    支持Git的代码托管网站: https://github.com/https://code.google.com http://www.codeplex.com/ http://git.oschina ...

  9. NGUI学习笔记（三）：屏幕自适应

    我们开发移动端游戏的时候,一般都会选择Constrained/FixedSize的缩放模式来保证图片在不同的分辨率下相对于屏幕的尺寸保持一致,但是对于屏幕自适应来说,这还是不够的,不同的手机存在不同的 ...

  10. Spring Framework 5.0.0.M3中文文档 翻译记录 Part I. Spring框架概览2.3

    2.3 Usage scenarios 使用场景 The building blocks described previously make Spring a logical choice in ma ...