虽然这不算什么亮点，不过也可以供路上的小伙伴学习下

直接上干货：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             -webkit-box-sizing: border-box;
  13.             -moz-box-sizing: border-box;
  14.             box-sizing: border-box;
  15.             text-decoration: none;
  16.             list-style: none;
  17.         }
  18.         .container {
  19.             width: 200px;
  20.             height: 200px;
  21.             display: inline-block;
  22.             margin: 100px;
  23.             border: 1px solid #ccc;
  24.             overflow: hidden;
  25.  
  26.             -webkit-animation: Rotate 6s linear infinite;
  27.         }
  28.         .c_r, .c_l {
  29.             width: 99px;
  30.             height: 200px;
  31.             float: left;
  32.             position: relative;
  33.         }
  34.  
  35.         .min_r, .min_l, .core_r, .core_l {
  36.             position: absolute;
  37.         }
  38.  
  39.         .c_r, .min_r, .core_l {
  40.             background-color: #fff;
  41.         }
  42.         .c_l, .min_l, .core_r {
  43.             background-color: #000;
  44.         }
  45.         .min_r, .min_l, .core_r, .core_l, .container {
  46.             border-radius: 50%;
  47.         }
  48.  
  49.         .min_r, .min_l {
  50.             width: 100px;
  51.             height: 100px;
  52.             z-index: 10;
  53.         }
  54.         .min_l {
  55.             left: 50%;
  56.             bottom: 1px;
  57.         }
  58.         .min_r {
  59.             right: 50%;
  60.             top: 0;
  61.         }
  62.  
  63.         .core_r, .core_l {
  64.             width: 20px;
  65.             height: 20px;
  66.             top: 40px;
  67.             left: 40px;
  68.         }
  69.         @-webkit-keyframes Rotate {
  70.             0%{transform: rotate(0deg)}
  71.             100%{transform: rotate(360deg)}
  72.         }
  73.  
  74.         @keyframes Rotate {
  75.             0%{transform: rotate(0deg)}
  76.             100%{transform: rotate(360deg)}
  77.         }
  78.  
  79.     </style>
  80. </head>
  81. <body>
  82.     <div class="container">
  83.         <div class="c_l">
  84.             <span class="min_l">
  85.                 <span class="core_l"></span>
  86.             </span>
  87.         </div>
  88.         <div class="c_r">
  89.             <span class="min_r">
  90.                 <span class="core_r"></span>
  91.             </span>
  92.         </div>
  93.     </div>
  94. </body>
  95. </html>

css 实现旋转八卦图的更多相关文章

  1. 使用CSS达到阴阳八卦图等图形

    CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  2. 用CSS实现阴阳八卦图等图形

    CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  3. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  4. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  5. jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

    之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D ...

  6. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  7. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  8. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

随机推荐

  1. angular : ui-router 操作原理

    <body> <a ui-sref="title">title<a> </body> ui-router 会去解析body里的ui- ...

  2. UVALive 7045 Last Defence

    ProblemK. Last Defence Description Given two integersA and B. Sequence S is defined as follow: • S0 ...

  3. 【SysML】用例图

    引言 对于系统工程师来说,设计用例图是一种极为常见的建模活动.用例图是一种黑盒视图,通过向读者传递一系列的用例以及相关的参与者,对系统对外提供的服务或系统具备的行为进行建模.在详细讨论SysML的用例 ...

  4. 《你不知道的JavaScript》整理（五）——值与原生函数

    一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...

  5. 使用ocupload和POI一键上传Excel并解析导入数据库

    使用的工具如下:  JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...

  6. Selenium 使用Eclipse+TestNG创建一个Project中遇到的问题

    继续之前的学习,对于一个没有太多计算机基础的人,刚学习selenium,最大的问题就是不知道该如何入手,最简单的办法就是录制脚本之后导入. 但是导入的时候也会出现一些问题,就是该导入到哪里?如何导入? ...

  7. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  8. 关于Http请求后返回json乱码的问题

    其实很多时候我们在做http请求数据返回的时候经常会莫名发现会出现乱码,大部分时候我们都觉得是编码不对造成的. 一般情况下正常我们默认都是作个很简单的操作,直接使用UTF-8编码基本问题就搞定了 Ht ...

  9. 基于SSH协议的端口转发

    [前言] 最近一直在使用ssh协议的端口转发(隧道)功能,完成对内网空透等.这篇文章将主要讲解3种常用的ssh tunnelling使用方法和基本原理. 在介绍具体内容前,我先奉上端口转发的常用情景: ...

  10. iOS UI控件总结(全)

    1.UIButton UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; btn.frame = CGRectMake ...