直接上代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>阴阳鱼</title>
  6.     <style>
  7.         body { background: #F0DFAD; }
  8.         .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; }
  9.  
  10.         @-webkit-keyframes rotate {
  11.             0% { -webkit-transform: rotate(0); transform: rotate(0); }
  12.             100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  13.         }
  14.  
  15.         @keyframes rotate {
  16.             0% { -webkit-transform: rotate(0); transform: rotate(0); }
  17.             100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  18.         }
  19.  
  20.         .yin-yang:before,
  21.         .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%; }
  22.         .yin-yang:before { left: 0; background: #FFF; border: 2rem solid #000; }
  23.         .yin-yang:after { right: 0; background: #000; border: 2rem solid #fff; }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="yin-yang"></div>
  28. </body>
  29. </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. 有关stm32的问题，程序里面的u8、u16这些是什么意思啊

    u8 是 unsigned charu16 是 unsigned shortu32 是 unsigned int

  2. Oracle安装注意点与工具使用简说

    oracle数据库安装 注意点:orcl,安装过程中指定sys,system等相关账户密码 scott账户下有常用的四张表,可用system或sys作为sysdba进去, 可alter user sc ...

  3. [WPF系列]-DataBinding 绑定计算表达式

            Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={Stat ...

  4. JAVA类的静态加载和动态加载以及NoClassDefFoundError和ClassNotFoundException

    我们都知道Java初始化一个类的时候可以用new 操作符来初始化, 也可通过Class.forName()的方式来得到一个Class类型的实例,然后通过这个Class类型的实例的newInstance ...

  5. 2016.10.30 NOIP模拟赛 day2 AM 整理

    题目+数据:链接:http://pan.baidu.com/s/1gfBg4h1 密码:ho7o 总共得了:130分, 1:100分  2:30分(只会这30分的暴力) 3:0(毫无思路) 虽然不高, ...

  6. 深入.NET平台的软件系统分成开发(1/6)

    第一章软件系统的分层开发 1.1 分成架构 分成模式定义:将解决方案中功能不同的模块分到不同的项目中实现.每一层中的主键应保持内聚性,每一层都应与他下面的各层保持松耦合. 分层模式是最常见的一种架构模 ...

  7. Rect 和 Bounds

    Rect 表示一个2D矩形区域 Bounds 表示一个3D的方块区域 http://www.cnblogs.com/crazylights/p/3977348.html

  8. U3D笔记11:47 2016/11/30-15:15 2016/12/19

    11:47 2016/11/30Before you can load a level you have to add it to the list of levels used in the gam ...

  9. linux-windows资源共享

    先安装samba,然后 sudo mount -t cifs //192.168.1.111/Jack_Win_Share /media/ -o username=Jack,password=1,io ...

  10. 微信小程序之数据绑定(五)

    [未经作者本人允许,请勿以任何形式转载] 前几篇讲述微信小程序开发工具使用.生命周期和事件. 本次讲述微信小程序数据和视图绑定 >>>数据视图绑定 做前端开发的同学,尤其是WEB前端 ...