<!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. 面试题-JS中的作用域相关问题

    对象类型: 原始数据类型存储的是值,而对象类型存储的是地址(指针).下面的这个例子就比较有意思了. 先看题: function test(person) { person.age = 26 perso ...

  2. 【Git】远程分支

    [Git]远程分支 转载:https://www.cnblogs.com/yangchongxing/p/10239270.html 目录 ============================ 1 ...

  3. 学习了JsonSchema，我自定义了一个校验代码

    JsonSchema 使用fastjsonschema来校验数据 # 导入验证器 import json import fastjsonschema # 读取schema with open('../ ...

  4. 牛客练习赛34 little w and Segment Coverage （差分区间）

    链接:https://ac.nowcoder.com/acm/contest/297/C来源:牛客网 题目描述 小w有m条线段,编号为1到m. 用这些线段覆盖数轴上的n个点,编号为1到n. 第i条线段 ...

  5. 在mpvue引入flyio

    先来说微信小程序原生的请求接口方式吧,如官网文档,在页面中请求直接调用 在这里感谢接的是提供的免费接口https://blog.csdn.net/c__chao/article/details/785 ...

  6. [20191206]隐含参数_db_always_check_system_ts.txt

    [20191206]隐含参数_db_always_check_system_ts.txt --//今年年头我做tab$删除恢复时,遇到的问题,就是遇到延迟块清除的问题.参考链接:http://blog ...

  7. Nuxt+Vuex初体验

    小呀嘛小二郎,背着书包上学堂... 今天一个困扰了我一周时间的问题终于被我解决了,值得庆祝 在Nuxt中使用Vuex实现数据存储 首先: 在store目录下新建一个index.js文件 需要有两个组件 ...

  8. Webpack 一些概念

    目录 引子 Dependency Graph Runtime Manifest Module.Bundle.Chunk Bundle Splitting Code Splitting Tree Sha ...

  9. Vue---记一次通过{{}}获取json数据-页面渲染不出来的坑

    前两天干活儿的时候碰到一个Vue的问题,让我这个菜鸡完全摸不到头脑,需求如下:前端页面点击表格中的某一行的详情按钮,会弹出一个Dialog,然后Dialog中有选项卡,选项卡中再有具体的table来展 ...

  10. MongoDB(三)：数据库操作、集合操作

    1. 数据库操作 看完前面的文章,大家应该把环境搭建好了,下面我们就开始学习MongoDB的一些基本操作了. 首先我们要了解的一些要点: MongoDB将数据存储为一个文档,数据结构由键值对(key= ...