CSS3实现阴阳鱼
直接上代码:
<!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实现阴阳鱼的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- 【C++】pair
STL的pair,有两个值,可以是不同的类型. template <class T1, class T2> struct pair; 注意,pair在头文件utility中,不要inclu ...
- CentOS 7 恢复 Windows 启动项
安装Linux时一般会自动识别windows系统并添加引导项,而 CentOS 默认不支持 NTFS 分区,CentOS7采用了Grub2,与CentOS6有区别.手动引导windows分区修改配置稍 ...
- vim 命令详解
vi: Visual Interface 可视化接口vim: VI iMproved VI增强版 全屏编辑器,模式化编辑器 vim模式: 编辑模式(命令模式) 输入模式 末行模式 模式转换: 编辑-- ...
- Android APP 读取 AndroidManifest.xml 中的版本信息详解
APP都会涉及到版本的问题,Android APP的版本信息保存在AndroidManifest.xml文件的顶部.如下图: 有2个属性表示,“android:versionCode”和“androi ...
- leetcode : Binary Tree Paths
Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...
- 在运行Hibernate Hello World程序的时候,抛如下错误: view plain Exception in thread "main" org.hibernate.exception.LockAcquisitionException 解决方法
在运行Hibernate Hello World程序的时候,抛如下错误: Exception in thread "main" org.hibernate.exception.Lo ...
- winform记事本(基本功能)
本题主要考察各种控件的应用 using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...
- python SQLAlchemy
这里我们记录几个python SQLAlchemy的使用例子: 如何对一个字段进行自增操作 user = session.query(User).with_lockmode('update').get ...
- Java.utils.Collections学习
阅读类库代码是有意义的,尤其是Java集合类框架以及算法Collections Arrays都是值得阅读的, 一来可以减少新手程序员的编码的工作量,二来,对于常见的需求,程序员应该先找下是否有现成的类 ...
- jmeter(三)Sample之SOAP/XML-RPC Request
项目背景:公司的微信端H5界面新开发了会员注册功能,需要对其进行压力测试 项目目标:需要承受每分钟最少6000的压力 一.建立一个测试计划(test plan) 之前有说过,jmeter打开后会自动生 ...