用HTML和CSS3做个鱼,CSS3实现阴阳鱼

直接上代码：

阴阳鱼

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; }

纯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控制过程的图片轮播 运用 ...

随机推荐

{CSDN}{英雄会}{砍树、石子游戏}

砍树 思路: 可以将题目意图转化为:给定一棵树,求其中最接近总权值一半的子树. DFS求每个节点的所有子节点的权值和,遍历每个节点,最接近总权值一半的即为答案.复杂度O(N). 石子游戏: 思路: 一 ...

XStream使用详解

1.Xstream介绍 (1)Xstream介绍     Xstream是一种OXMapping 技术,是用来处理XML文件序列化的框架,在将JavaBean序列化,或将XML文件反序列化的时候,不需 ...

android控件---自定义带文本的ImageButton

由于SDK提供的ImageButton只能添加图片,不能添加文字:而Button控件添加的文字只能显示在图片内部:当我们需要添加文字在图片外部时就不能满足我们的需求了,顾只能自己写个自定义ImageB ...

os8 location authorization 错误.

今天在XCode6上打开之前写的地图时,给我报这个错 location authorization 去网上查了一番,才知道Xcode6对地图的设置稍有修改 在stackoverflow上找到了答案 i ...

Python测试开发之random模块

random模块是一个生成随机数.随机字符的模块,平时被使用的也非常多,下面是random模块的常用方法: random.random()生成一个0-1的随机小数,如果想要对随机小数保留两位小数,可以 ...

Android初级教程通过简要分析“土司”源码，来自实现定义土司理论探讨

由于系统自带的土司瞬间即逝,而且非常难看.因此我们就希望自定义自己的土司风格.有些实例就是基于自定义土司完成的,例如金山卫士的火箭发射,基本原理就是个土司.但是在做出自己的土司风格之前,还是要简要分析 ...

halcon+WinForm打开摄像头

注意引用halcon.dll,项目属性平台一致(X64) using HalconDotNet;//引用halcon using System.Threading;//引用线程 namespace M ...

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

https://electronjs.org/ —— 官网 https://github.com/electron/electron-api-demos/releases —— 下载demo 下载安装 ...

Flume入门：安装、部署

一.什么是Flume? flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original genera ...