<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #ddd;
}
.boxs{
display: flex;
align-items: center;
width: 200px;
height: 200px;
margin: 100px auto;
/* 从上往下各占50%由黑变白的一个过程! */
background: linear-gradient(#000 50%,#fff 50%);
border-radius: 50%

}
/* 接下来用css3伪对象选择符创建内部的两个小圆形，由于<i>标签是弹性布局，
并且设置了align-items:center属性，所以创建的内部元素垂直居中： */
.boxs::before,.boxs::after{
content:"";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
background: rgb(11, 189, 165);
}
.boxs::before{
background:radial-gradient(#fff 25%, #000 25%);
transform-origin: 0% 50%;
animation-name: move;

animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.boxs::after{
background:radial-gradient(#000 25%, #fff 25%);
transform-origin: 100% 50%;
animation-name: move;

animation-duration: 1s;
animation-timing-function: linear;
animation-delay: -1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* 使用关键帧(@keyframes)和动画属性animation：
创建动画，从原始大小0.7倍变化到1.3倍： */
@keyframes move{
from{
transform: scale(0.7);
}
to{
transform:scale(1.3);
}
}

</style>
</head>
<body>
<i class="boxs"></i>
</body>
</html>

如何用css实现太极图的更多相关文章

  1. 如何用CSS实现在新窗口打开链接？

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  2. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  4. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  5. 如何用css实现一个三角形？

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  6. css重修之书（一）：如何用css制作比1px更细的边框

    如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方 ...

  7. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  8. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  9. Div+Css画太极图源代码

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...

随机推荐

  1. 基于 .NET Core 的简单文件服务器

    Netnr.FileServer 基于 .NET Core 的简单文件服务器,数据库为SQLite 源码 https://github.com/netnr/blog https://gitee.com ...

  2. Flume理论研究与实验

    一.理论研究 1.1 总览 Flume是一个分布式的可靠的日志收集系统,主要是用于从各种数据源收集.聚合并移动大批量的日志数据到存储系统:它本身具有许多故障转移和恢复机制,具有强大的容错能力:它使用下 ...

  3. 语句知识总结（js）

    函数声明语句和函数定义表达式有什么不同 首先看一下函数声明语句和函数定义表达式的例子,表达式会返回一个值,而语句就是js中的一整句,下面例子中第6行是函数声明语句,第10行是函数定义表达式. f(); ...

  4. C++生成完全二叉树

    C++生成完全二叉树 2019-12-20 By Gauss 1.背景介绍 完全二叉树是效率很高的数据结构,完全二叉树是由满二叉树而引出来的.对于深度为K的,有n个结点的二叉树,当且仅当其每一个结点都 ...

  5. C# 中的栈和堆

    程序运行时,它的数据必须存储在内存中.一个数据项需要多大的内存.存储在内存中的什么位置.以及如何存储都依赖于该数据项的类型. 运行中的程序使用两个内存区域来存储数据:栈和堆. 栈 栈是一个内存数组,是 ...

  6. 计划任务cron

    cron 计划任务 作用: 计划任务主要是做一些周期性的任务,目前最主要的用途是定期备份数据 Schedule one-time tasks with at. 一次性调度执行 atSchedule r ...

  7. 2019年Java面试题基础系列228道（1）

    1.面向对象的特征有哪些方面? 面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为 ...

  8. (办公)记事本_Linux权限

    参考谷粒学院Linux教程:http://www.gulixueyuan.com/course/300/task/7084/show# linux权限,什么用户可以操作什么. 1.基本权限的作用: 1 ...

  9. AudioFormat.Encoding

    https://docs.oracle.com/javase/7/docs/api/javax/sound/sampled/AudioFormat.Encoding.html

  10. 初探爬虫 ——《python 3 网络爬虫开发实践》读书笔记

    零.背景 之前在 node.js 下写过一些爬虫,去做自己的私人网站和工具,但一直没有稍微深入的了解,借着此次公司的新项目,体系的学习下. 本文内容主要侧重介绍爬虫的概念.玩法.策略.不同工具的列举和 ...