1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #container{height: 202px;width: 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100px auto;
  8.             background: linear-gradient(90deg,black 50%,white 50%);}
  9.         #top,#bottom{height: 100px;width: 100px;margin: 0 auto;border-radius: 100px}
  10.         #top{border: 1px solid white;}
  11.         #bottom{border: 1px solid black;}
  12.         #inner1,#inner2{height:50px;width: 50px;margin: 25px  auto;border-radius: 50px; }
  13.         #inner1{background: black}
  14.         #inner2{background: white}
  15.         #top{background: white}
  16.         #bottom{background: black}
  17.         @keyframes bonce{
  18.             0%{transform: rotate(0deg)}
  19.             100%{transform: rotate(360deg)}
  20.         }
  21.         #container{animation-name: bonce;animation-duration: 5s;animation-iteration-count: 100;animation-timing-function: linear;}
  22.     </style>
  23. </head>
  24. <body>
  25. <div id="container">
  26.     <div id="top">
  27.         <div id="inner1"></div>
  28.     </div>
  29.     <div id="bottom">
  30.         <div id="inner2"></div>
  31.     </div>
  32. </div>
  33.  
  34. </body>
  35. </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. C# 两个ListBox 数据互传-基础操作

    先看效果图: 两个服务设施列,左边:lbFacility1,右边:lbFacility2,中间向左向右箭头. 如果只是单纯的向左向右移动,那很简单. 因为项目遇到要获取选中项的ID,通过给ListBo ...

  2. SimpleHttpServer的学习之UML

    如何分析一个稍微大点的源码呢? 静态分析 除了看代码,就是 uml图,UML虽然在书本类与类之间的关系很复杂,可能要一本书,但是最核心的其实很简单: (1)继承 extends (2)实现接口 imp ...

  3. bzoj 3124 [Sdoi2013]直径（dfs）

    Description 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅有N-1 条边. 路径:一 ...

  4. NOIP2011 铺地毯

    1铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的 ...

  5. NOIP2014 联合权值

    2．联合权值 (link.cpp/c/pas) [问题描述] 无向连通图G有n个点,n-1条边.点从1到n依次编号,编号为i的点的权值为Wi  ,每条边的长度均为1.图上两点(u, v)的距离定义为u ...

  6. grails2.3.11第一课

    以指令的方式Getting Started 1. 创建一个项目 grails create-app HelloGrails 2. 因为我环境变量中配置的jdk是1.8的,所以我要把这个项目搞到IDEA ...

  7. ./wls1036_linux32.bin: /lib/ld-linux.so.2: bad ELF interpreter

    [CentOS]安装软件:/lib/ld-linux.so.2: bad ELF interpreter解决   环境: [orangle@localhost Downloads]$ uname -m ...

  8. POJ3468--A Simple Problem with Integers（Splay Tree）

    虽然有点难,但是这套题都挂了一个月了啊喂…… 网上模板好多……最后还是抄了kuangbin聚聚的,毕竟好多模板都是抄他的,比较习惯…… POJ 3468 题意:给n个数,两种操作,区间整体加一个数,或 ...

  9. [iOS基础控件 - bugs]

    1.不能呼出iOS模拟器键盘 Can't find keyplane that supports type 4 for keyboard iPhone-Portrait-NumberPad 解决:Ha ...

  10. <meta 标签的详细使用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta   标签的用处很多.meta  的属性有两种:na ...