<!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. Startup/OWIN框架

    为什么写OWIN框架呢? 因为没接触刀OWIN框架直接去学.NET Core比较生硬,个人见解.首先我们要知道OWIN的由来:ASP.NET和IIS和Windows操作系统的关系在之前是紧密联系的,缺 ...

  2. elasticsearch节点请求流程

  3. mini_magick上传图片

    rails上传图片需要用到的gem: gem 'carrierwave'gem 'mini_magick' 在项目Gemfil中添加上面的两个gem,然后bundle install 然后创建modl ...

  4. 让外部的开发机直接访问Kubernetes群集内的服务！

    让外部的开发机直接访问Kubernetes群集内的服务! 1.场景 容器化+K8s编排已经是现在进行时把网站的多个项目设计为云原生(Cloud Native)或老项改造为云原生可以获得诸多能力例如无云 ...

  5. 在 VSCode 中 Angular 的字符串报错的问题

    使用 Angular 时,报错 [tslint] " should be ' 报错原因是因为 ESLint 的严格模式,限制了使用 ' ,甚至多一个空格都会报错. 我们只需要在 settin ...

  6. JDK1.8新特性-Lambda表达式

    Lambda 表达式 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). 使用 Lambda 表 ...

  7. Linux CPU占用率监控工具

    关键词:top.perf.sar.ksar.mpstat.uptime.vmstat.pidstat.time.cpustat.munin.htop.glances.atop.nmon.pcp-gui ...

  8. JavaScript 函数工具

    组 all:布尔全等判断 const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 自定义文字

    字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的 ...

  10. TDD的简单实践

    前言 最近有幸跟随资深ThoughtWorks咨询师熊节老师一起学习测试驱动设计,经过短暂的十几天培训,对测试驱动设计的基本原则.实践模式.技巧有了一点点初步的认识. 在此之前,经常自嘲我经历的公司实 ...