直接上代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <title>阴阳鱼</title>

    <style>

        body { background: #F0DFAD; }

        .yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #000 50%, #000 100%); background: linear-gradient(to bottom, #fff 0%, #fff 50%, #000 50%, #000 100%); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4); -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; }

        @-webkit-keyframes rotate {

            0% { -webkit-transform: rotate(0); transform: rotate(0); }

            100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }

        }

        @keyframes rotate {

            0% { -webkit-transform: rotate(0); transform: rotate(0); }

            100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }

        }

        .yin-yang:before,

        .yin-yang:after { content: ''; box-sizing: border-box; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 50%; width: 50%; border-radius: 50%; }

        .yin-yang:before { left: 0; background: #FFF; border: 2rem solid #000; }

        .yin-yang:after { right: 0; background: #000; border: 2rem solid #fff; }

    </style>

</head>

<body>

    <div class="yin-yang"></div>

</body>

</html>

来源：http://codepen.io/sfi0zy/pen/ALrAvd

CSS3实现阴阳鱼的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

随机推荐

  1. log4j配置详解

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  2. Redis学习笔记2-Redis的安装体验

    Redis的官方只提供了Linux版本的,并没提供Windows版本的(不过非官方有windows版本的.可以下载下来做开发测试学习用非常方便.博客后面会介绍到的).Linux下安装过程如下[以下命令 ...

  3. Linux学习笔记1_用户和权限

    自从我大微软终于放下身段,决定给开源社区一个迟来的拥抱,追随多年的拥趸们像是突然得到了女神的垂青,各种茫然失措.痛哭流涕.欢欣鼓舞,纷纷唱了起来:“等了好久终于等到今天,梦了好久终于把梦实现……”唱完 ...

  4. linux下使用denyhosts防止ssh暴力破解

    1.DenyHosts介绍 DenyHosts是Python语言写的一个程序,它会分析sshd的日志文件(/var/log/secure),当发现重 复的攻击时就会记录IP到/etc/hosts.de ...

  5. 使用Windbg在XP下Heap追踪失败的原因

    1.故事背景      最近同事的代码中碰到一个bug会导致奔溃的bug,从dump上看是由于某个对象的堆内存指针被释放了,但代码仍调用了该对象指针的虚函数,从而引起内存访问违法崩溃,由于该类被大量使 ...

  6. HTTPS简述

    Https是什么? HTTPS是Http Over SSL,简单来说就是HTTP的安全版本,在http之上使用TLS,SSL加密协议. HTTPS实质是在HTTP基础上使用非对称加密相互生成并传递对称 ...

  7. Caffe 单独测试添加的layer

    转载请注明出处,楼燚(yì)航的blog,http://home.cnblogs.com/louyihang-loves-baiyan/ 一般我们在使用Caffe的时候,可能需要根据自己的任务需求添加 ...

  8. Java并发编程：Lock

    原文出处: 海子 在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包 ...

  9. Java通过ODBC链接数据库并遍历结果的一个问题

    上一篇文章谈到怎么连接Oracle数据库,其实通过ODBC也差不多,只是driver要换成JdbcOdbcDriver.配置文件如下: driver=sun.jdbc.odbc.JdbcOdbcDri ...

  10. Linux基本命令（一）

    Linux基本命令 编辑器 vim编译器 Gnu工具链-gcc调试器 GDB操作系统是用C来写的 系统编程 (核心骨架 80%) 文件I/O 文件系统 进程{ 进程控制原语.进程间通信.进程间关系 信 ...