CSS布局案例 3-51 旋转太极图效果

一醉南柯

已于 2024-01-04 17:02:06 修改

阅读量302

点赞数

分类专栏： Web前端开发文章标签： css 前端 css3

于 2021-04-25 20:27:58 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116136289

版权

Web前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现旋转太极图效果。

实现过程

1.步骤

太极图旋转效果实现步骤:
	  1、先制作一个黑色大圆、半个白色大圆、两个一黑一白的中圆、两个一黑一白的小圆
	  2、将几个图形组合在一块形成太极图(绝对定位实现)
	  3、整组都动起来(动画旋转实现)

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.circlebox{
				width: 300px;
				height: 300px;
				margin: 150px auto;
				/* 父布局设置相对布局,子元素设置绝对布局,调整位置才好用 */
				position: relative;
				/* 旋转动画效果 */
				animation: move 1.5s infinite linear;
			}
			/* 大黑圆 */
			.circleblock{
				width: 300px;
				height: 300px;
				background-color: #000000;
				border-radius: 50%;
			}
			/* 半白园 */
			.circlewhite{
				width: 150px;
				height: 300px;
				background-color: #FFFFFF;
				border-top-right-radius: 150px;
				border-bottom-right-radius: 150px;
				position: absolute;
				top: 0px;
				left: 150px;
			}
			/* 中黑圆 */
			.circlebb{
				width: 150px;
				height: 150px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				top: 0px;
				left: 75px;
			}
			/* 中白圆 */
			.circleww{
				width: 150px;
				height: 150px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 150px;
				left: 75px;
			}
			/* 小白圆 */
			.circlebbl{
				width: 40px;
				height: 40px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 50px;
				left: 130px;
			}
			/* 小黑圆 */
			.circlewwl{
				width: 40px;
				height: 40px;
				background-color: black;
				border-radius: 50%;
				position: absolute;
				bottom: 50px;
				left: 130px;
			}
			/* 旋转动画 */
			@keyframes move{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="circlebox">
			<div class="circleblock"></div>
			<div class="circlewhite"></div>
			<div class="circlebb"></div>
			<div class="circleww"></div>
			<div class="circlebbl"></div>
			<div class="circlewwl"></div>
		</div>
	</body>
</html>