直接上代码：

<!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. eclipse svn账号更换

    在eclipse下用 svn的时候,我们习惯将用户名和密码保存.前天公司将svn的账号全部更换了,这时原来的eclipse保存的svn账号密码就失效了.那怎么样才能切换账号了,eclipse svn插 ...

  2. mysql下存储文件问题

    ibdata1 & mysql-bin 问题:磁盘空间报警,经查发现ibdata1和mysql-bin日志占用空间太多(其中ibdata1超过120G,mysql-bin超过80G) 原因:i ...

  3. 三维网格补洞算法（Radial Basis Function）

    在逆向工程中,由于设备或模型的原因,我们获取得到的三维模型数据往往并不完整,从而使得生成的网格模型存在孔洞,这对后续的模型分析会造成影响.下面介绍一种基于径向基函数(RBF:Radial Basis ...

  4. python使用you-get模块下载视频

    pip install you-get # 安装先 怎么用    进入命令行: you-get url 暂停下载:ctrl + c ,继续下载重复  you-get url 官网地址:https:// ...

  5. AndroidStudio导入Eclipse的代码格式化文件

    对于一个团队来说,使用统一的代码格式是非常重要的,否则在使用版本控制工具时,会出现大量的冲突.在Eclipse里,我们可以通过一些xml来进行代码格式的统一,但是这些文件要应用在AndroidStud ...

  6. 断今天日期和指定日期相等和两者的时间差为两年的sql

    1.  ---判断今天日期和指定日期相等 update store  set Status =1 where CONVERT(varchar(12) ,opendate, 105 )= CONVERT ...

  7. JSON.net 在实体类中自定义日期的格式

    定义日期格式转换类,其继承 IsoDateTimeConverter,代码如下: public class DateTimeConverter : IsoDateTimeConverter { pub ...

  8. [CareerCup] 1.1 Unique Characters of a String 字符串中不同的字符

    1.1 Implement an algorithm to determine if a string has all unique characters. What if you cannot us ...

  9. LeetCode 笔记系列 17 Largest Rectangle in Histogram

    题目: Largest Rectangle in Histogram Given n non-negative integers representing the histogram's bar he ...

  10. Monk快速开发框架前期约定

    命名规则 后端命名(统一采用[前缀]骆驼命名) 所有类都必须以首字母大写开头 接口必须以I开头 业务逻辑或业务接口必须以Services结尾 数据仓储或仓储接口必须以Repository结尾 所有特效 ...