直接上代码：

<!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. [zz]如何在C语言程序中处理汉字

    学习过C语言的人也许有时会遇到这样一个问题:如何用变量存储汉字以及对这些变量进行操作.目前许多C语言参考书中都没涉及到这个问题,程序中多为处理英文变量和英文字符串,涉及到汉字的情况也大都是在print ...

  2. hdu[1711]number sequence

    Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...

  3. IIS上部署Net.Core

    部署: 1.安装vc_redist.x64vc_redist.x64 2.安装DotNetCore.1.0.0.RC2-WindowsHosting 3.安装DotNetCore.1.0.0-SDK. ...

  4. Java实现数组排序

    package com.souvc.hibernate.exp; public class MySort { /** * 方法名:main</br> * 详述:Java实现数组排序 < ...

  5. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

  6. win7 装了VB虚拟机 开始挺好用 后来突然就打不开了 提示如下错误：（如图）创建 COM 对象失败.

    创建 COM 对象失败. 应用程序将被中断. Start tag expected, '<' not found. Location: 'C:\Users\Mike/.VirtualBox\Vi ...

  7. cocoa框架 for iOS

    1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Cocoa程序呢?不是编程语言,因为在Cocoa开发中你可以使用各种语言:也不是开发工具,你可 ...

  8. npoi批量导入实现及相关技巧

    批量导入功能对于大部分后台系统来说都是不可或缺的一部分,常见的场景-基础数据的录入(部门,用户),用批量导入方便快捷.最近项目需要用到批量导入,决定花点时间写套比较通用的Excel导入功能.经过考虑, ...

  9. 20145233 GDB调试汇编分析

    GDB调试汇编分析 代码 #include<stdio.h> short addend1 = 1; static int addend2 = 2; const static long ad ...

  10. Linq to Xml读取复杂xml(带命名空间)

    前言:xml的操作方式有多种,但要论使用频繁程度,博主用得最多的还是Linq to xml的方式,觉得它使用起来很方便,就用那么几个方法就能完成简单xml的读写.之前做的一个项目有一个很变态的需求:C ...