<!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. CentOS 7.4搭建LAMP，LAMP：Linux、Apache、MySQL、PHP

    CentOS 7.4搭建LAMP,LAMP:Linux.Apache.MySQL.PHP. 目录: 第一部分 准备工作 第二部分 安装Apache服务 第三部分 安装MySQL服务 第四部分 搭建PH ...

  2. let和const总结(ES6)

    文章目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块 ...

  3. Python工作好找吗?没有工作经验和学历怎么找？【就业必学】

    大家都知道,随着人工智能时代的到来,Python的需求也变的越来越大了.从目前各大IT招聘网上显示招聘需求是非常大,而且薪资基本都在10k起,高的可达40-50k,当然这个要求很高,看下普遍的吧: 一 ...

  4. Python读写Excel表格（简单实用）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:giao窝里giao首先安装两个库:pip install xlrd. ...

  5. C#mvc重新定向并在路径中使用html扩展名实现伪静态

    首先修改配置文件,增加下面的两个配置: 接下来,修改MapRoute为路由增加.html后缀 完成后,我们来验证一下刚才的成果: http://localhost:2279/Home/.html 一个 ...

  6. 一起学Spring之注解和Schema方式实现AOP

    概述 在上一篇,我们了解了通过实现接口和XML配置的方式来实现AOP,在实现注解方式AOP之前,先了解一下AspectJ.AspectJ是一个面向切面的框架,它扩展了Java语言,定义了AOP语法,能 ...

  7. Androi O Automotive 介绍

    最近由于工作需要对android o 中的 automotive源码进行了深入的学习,现总结如下: Android O Vehicle之架构介绍 Android O Vehicle之Car Servi ...

  8. webpack安装错误 ‘webpack : 无法加载文件’

  9. python函数中参数的传递

    Python唯一支持的参数传递方式是『共享传参』(call by sharing)多数面向对象语言都采用这一模式,包括Ruby.Smalltalk和Java(Java的引用类型是这样,基本类型按值传递 ...

  10. oc：定时删除ES日志数据释放空间

    修改方法: 1.直接编辑修改 查看当前logging-curator配置,了解当前定时删除大的策略. oc edit configmap/logging-curator 打开后,可以直接编辑保存. 2 ...