直接上代码:

<!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. android ListView 属性

    android:divider="#fffff" 分割线颜色 android:dividerHeight="1px" 分割线高度 divider 分割线-去掉分 ...

  2. MySQL 笔记2

    -- *************一.数据约束********************---- -- 1.1 默认值 CREATE TABLE student( id INT, NAME ), addr ...

  3. hbase-site.xml中HBASE_CLASSPATH 的设置

    http://www.dataguru.cn/thread-95064-1-1.html

  4. jmeter(八)断言

    jmeter中有个元件叫做断言(Assertion),它的作用和loadrunner中的检查点类似: 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言 ...

  5. return false

    ”return false“到底做了什么? 当你每次调用”return false“的时候,它实际上做了3件事情: •event.preventDefault();•event.stopPropaga ...

  6. one to many

    @OneToMany(mappedBy="order",fetch=FetchType.EAGER,cascade={CascadeType.ALL})    private Li ...

  7. git教程链接

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  8. 简单了解ICMP协议

    ping命令是什么协议? 维基百科: ping是一种电脑网络工具,用来测试数据包能否通过IP协议到达特定主机.ping的运作原理是向目标主机传出一个ICMP echo@要求数据包,并等待接受echo回 ...

  9. 部署 OpenStack VirtualBox

    VirtualBox 中部署 OpenStack 大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂, ...

  10. Linux下MySQL/MariaDB Galera集群搭建过程

    MariaDB介绍 MariaDB是开源社区维护的一个MySQL分支,由MySQL的创始人Michael Widenius主导开发,采用GPL授权许可证. MariaDB的目的是完全兼容MySQL,包 ...