2021-06-01太极图实现（定位+动画）

效果

原理

解说：

利用一个大的盒子，利用border-radius:50%;设置为一个圆，在大的盒子里面放一个1号盒子（宽是大盒子一半，高度等同大盒子）在左边，利用border-radius左上和左下设值右上右下为0；右边在放一个2号盒子（宽是大盒子一半，高度等同大盒子）在右边，利用border-radius右上和右下设值左上左下为0。

利用子绝父相原理，大盒子相对定位，3号盒子和4号盒子都利用绝对定位（宽高都为父盒子的一半），在3号盒子里面再放一个5号盒子，实现垂直水平居中。在4号盒子里面放5号盒子，实现垂直水平居中。就完成了。

最后令1和3、6背景颜色为黑色。2、4、5背景颜色为黑色背景为白色即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: antiquewhite;}.box {display: flex;position: relative;width: 600px;height: 600px;margin: auto;border-radius: 50%;/* transition: all 3s; */animation: Move 2s ease-in-out infinite ;}.box .a,.box .b {width: 50%;height: 100%;}.box .a {border-radius: 600px 0 0 600px;background-color: black;}.box .b {border-radius:0 600px 600px 0;background-color: white;}.box .c,.box .d {position: absolute;left: 25%;width: 50%;height: 50%;border-radius: 50%;}.box .c{top: 0;background-color: black;}.box .d{bottom: 0;background-color: white;}.e,.f {position: absolute;width: 100px;height: 100px;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;border-radius: 50%;}.e {background-color: white;}.f {background-color: black;}/* .box:hover {transform: rotate(360deg);} */@keyframes Move{100% {transform: rotate(360deg);}}</style>
</head>
<body><div class="box"><div class="a"></div><div class="b"></div><div class="c"><div class="e"></div></div><div class="d"><div class="f"></div></div></div>
</body>
</html>

2021-06-01太极图实现（定位+动画）相关推荐

499、Java分布式和集群12 -【SpringCloud视图微服务 - 消息总线Bus】 2021.06.01
目录 0.RabbitMQ 1.先运行,看到效果,再学习 2.pom.xml 3.bootstrap.yml 4.application.yml 5.ProductDataServiceApplica ...
《惢客创业日记》2021.06.01（周二）五月份的工作总结
时间真快,五月一晃而过,感觉时间就像一辆没有停靠站台的疾驰列车,装载着每个人的经历和人生驶向没有尽头的远方.不管是对,还是错,是得到,还是失去,都将其存储到每个人的大脑记忆中,由此让我想到了一句话:& ...
Doris Weekly FAQ】2021.07.19~2021.08.01
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月19日 - 2021年08月01日的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）
一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...
109：vue+openlayers 定位动画（平移-弹性平移-飞行示例代码）
第109个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中来实现定位动画,实现平移,飞行,弹性动画等. 直接复制下面的 vue+openlayers源代码,操作2分钟即可 ...
2021.06.03邮票面值设计
2021.06.03邮票面值设计题目描述给定一个信封,最多只允许粘贴 N 张邮票,计算在给定 K(N+K≤15)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值 MAX ...
【财经期刊FM-Radio｜2021年01月19日】
title: [财经期刊FM-Radio|2021年01月19日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 美股美债休市,欧股走出逾一周低谷,雪铁龙并购后新公司登陆欧股首日涨超 ...
【财经期刊FM-Radio｜2021年01月23日】
title: [财经期刊FM-Radio|2021年01月23日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 纳指惊险收涨,道指两连跌,中概电子烟第一股翻倍,比特币大反弹. 美国 ...
2021.06.06家庭财经系统制作(2)
show tables; 查看数据库里有什么表命令. 碰到mysql软件问题.比想象的难缠. 用之前的方式打不开黑框(鼠标单击 mysql5.7 ccommand line Client),黑框一闪而 ...
【财经期刊FM-Radio｜2021年01月20日】
title: [财经期刊FM-Radio|2021年01月20日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 纳指涨超1.5%,中概大涨,腾讯音乐涨21%,金银油回涨,以太币新高 ...

2021-06-01太极图实现（定位+动画）

效果

2021-06-01太极图实现（定位+动画）相关推荐

最新文章

热门文章