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

直接上干货：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

            text-decoration: none;

            list-style: none;

        }

        .container {

            width: 200px;

            height: 200px;

            display: inline-block;

            margin: 100px;

            border: 1px solid #ccc;

            overflow: hidden;

            -webkit-animation: Rotate 6s linear infinite;

        }

        .c_r, .c_l {

            width: 99px;

            height: 200px;

            float: left;

            position: relative;

        }

        .min_r, .min_l, .core_r, .core_l {

            position: absolute;

        }

        .c_r, .min_r, .core_l {

            background-color: #fff;

        }

        .c_l, .min_l, .core_r {

            background-color: #000;

        }

        .min_r, .min_l, .core_r, .core_l, .container {

            border-radius: 50%;

        }

        .min_r, .min_l {

            width: 100px;

            height: 100px;

            z-index: 10;

        }

        .min_l {

            left: 50%;

            bottom: 1px;

        }

        .min_r {

            right: 50%;

            top: 0;

        }

        .core_r, .core_l {

            width: 20px;

            height: 20px;

            top: 40px;

            left: 40px;

        }

        @-webkit-keyframes Rotate {

            0%{transform: rotate(0deg)}

            100%{transform: rotate(360deg)}

        }

        @keyframes Rotate {

            0%{transform: rotate(0deg)}

            100%{transform: rotate(360deg)}

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="c_l">

            <span class="min_l">

                <span class="core_l"></span>

            </span>

        </div>

        <div class="c_r">

            <span class="min_r">

                <span class="core_r"></span>

            </span>

        </div>

    </div>

</body>

</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. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

  2. 每天一个Linux命令（22）--find命令详解

    find 一些常用参数的一些常用实例和一些具体用法和注意事项. 1.使用 name 选项: 文件名选项是 find 命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模 ...

  3. Linux i2c子系统(一) _动手写一个i2c设备驱动

    i2c总线是一种十分常见的板级总线,本文以linux3.14.0为参考, 讨论Linux中的i2c驱动模型并利用这个模型写一个mpu6050的驱动, 最后在应用层将mpu6050中的原始数据读取出来 ...

  4. 服务器数据库搭建流程（CentOs+mysql）

    前言: 服务器上数据库搭建需要知道Linux系统的版本,以前的Ubuntu14.04直接在终端下输入apt-get install (package)便可方便的下载并安装mysql,但是在centOs ...

  5. 出现java.lang.reflect.UndeclaredThrowableException异常

    解决方案:1.看导进来的项目是否有中文路径.2.看是否有get.set方法没写.3.和部署的环境有关.比如,是否写了构造函数.EJB需要.

  6. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. XML（20161113）

    XML: 可扩展标记语言 在页面之间传递数据使用的,专门为了数据传输而存在 载体 HTML:超文本标记语言 显示 XML写法: 标签:<标签名></标签名> 特点:1.必须要有 ...

  8. AndroidTest工程的自定义gradle task

    由于需要将assets目录的资源拷贝到设备sdcard中,然而我的工程是一个android test工程,而android test工程在编译阶段,不会把assets目录的资源打包成对应apk,而为了 ...

  9. 基于Modbus的C#串口调试开发

    说明:本文主要研究的是使用C# WinForm开发的串口调试软件(其中包含Modbus协议相关操作).Modbus相关协议可以查阅百度文库等,可参考: <http://wenku.baidu.c ...

  10. python + selenium <一>

    python 安装 python 下载地址: http://python.org/getit/ ez_setup.py 下载地址: https://pypi.python.org/packages/s ...