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

直接上干货：

<!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. 面向对象 "一"

    1:面向对象不是所有情况都适用. 2面向对象编程 a:定义类 calss Foo: 注意顶一个类的时候首字母必须是大写 def (方法一)(self,bb) pass b:根据创建对象,创建和Foo实 ...

  2. wap问答系统工作总结

    一直想找个锻炼自己的机会,但是又很恐慌,怕自己能力太差,把握不住机会,把事情弄糟. 终于,要做wap问答系统了,本来说是几个人一块儿做,我分析了下页面,发现共同的部分还是比较多的,有点想法,要不我接过 ...

  3. js对象继承的问题

    js继承方法有多种: 1.利用call()和apply()的方法. call()里面接受多个参数:apply()只能接受两个参数. call()第一个参数是本身,后面都是他的属性和方法. apply( ...

  4. Struts文件下载

    /* 文件下载的先决条件 * 1. 在xml配置文件中必须配置一个type="stream"的result, result中不需要填写任何内容 * 2. 在Action中编写一个接 ...

  5. 4052: [Cerc2013]Magical GCD

    4052: [Cerc2013]Magical GCD Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 148  Solved: 70[Submit][ ...

  6. 1574: [Usaco2009 Jan]地震损坏Damage

    1574: [Usaco2009 Jan]地震损坏Damage Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 425  Solved: 232[Subm ...

  7. 关于在链路聚合下做smart，monitor link的转发测试

    关于在链路聚合下做smart,monitor link的转发测试 这次又要开始瞎折腾了.没事找事了.毕竟我还是很无聊的: 这个实验主要要涉及到以下几个方面: 1.gvrp的应用: 2.Smart Li ...

  8. jumpserver 堡垒机环境搭建（图文详解）

    摘要: Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 完全开源,GPL授权 Python编 ...

  9. JAVA发送邮件的DEMO

    最近有朋友问邮件怎么发送,就简单写了个demo,因为懒得找jar包,所以项目是创建的maven工程,具体的maven引用的jar如下: <dependency> <groupId&g ...

  10. 【Troubleshooting Case】Unable to delete Exchange database？

    在我们日常邮件系统运维管理或实施部署变更中,经常会遇到,删除Exchange 数据库DB时,提示无法删除. ------------------– Microsoft Exchange Error - ...