html+css配合div或伪元素编写动态旋转太极图

树下一少年

已于 2023-11-10 09:34:07 修改

阅读量1.2k

点赞数 1

分类专栏： Web前端文章标签： css 前端 css3 html html5

于 2023-02-07 12:11:31 首次发布

本文链接：https://blog.csdn.net/weixin_64334766/article/details/128916318

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.主要思路

div和伪元素两种方法都类似

1.div思路

创建一个大盒子并设置弧度（一个大圆），在内创建两个小盒子（两个小圆）设置弧度调整位置，为几个盒子设置颜色，最后赋予动画效果即可

2.伪元素思路

创建一个大盒子并设置弧度（一个大圆），在内设定前后元素，为前后元素设置宽高、弧度等属性，赋予颜色和动画效果即可

二.完整代码

1.div写法

（1）演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@keyframes mytaiji{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.all{
				width: 0;
				height: 500px;        
				border-radius: 50%;           
				border-left: 250px solid white;
				border-right: 250px solid black;      
				animation: mytaiji 2s infinite linear;        
			}
			.top,.bottom{
				width: 90px;
				height: 90px;                
				border-radius: 50%;
				margin-left: -125px;
			}
			.top{
				border: 80px solid white;
				background-color: black;
			}
			.bottom{
				border: 80px solid black;
				background-color: white;
			}
			/* .border{
				width: 499px;
				height: 499px;
				border: 1px solid black;
				border-radius: 50%;
			} */
			body{
				background-color: lemonchiffon;
			}
		</style>
	</head>
	<body>
		<div class="border">
		<div class="all">
			<div class="top"></div>
			<div class="bottom"></div>
		</div>
		</div>
	</body>
</html>

（2）附上部分参考注释

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           @keyframes mytaiji{
               from{
                   transform: rotate(0deg);
               }
               to{
                   transform: rotate(360deg);
               }
           }
           /*设置动画效果，全方位旋转*/
           .all{
               width: 0;
               height: 500px;
               border-radius: 50%; /*设置宽高、边框弧度*/
               border-left: 250px solid white;
               border-right: 250px solid black;

        /*设置大圆形内左右两边的颜色，这个边框弧度需要结合写的宽高进行调整*/
               animation: mytaiji 2s infinite linear; /*为这个大图设置动画效果*/
           }
           .top,.bottom{
               width: 90px;
               height: 90px;
               border-radius: 50%;
               margin-left: -125px;
           }
           /*根据大圆的宽高状况设置两个小圆的宽高和弧度，并调整他们的左右位置*/
           .top{
               border: 80px solid white;
               background-color: black;
           }
           .bottom{
               border: 80px solid black;
               background-color: white;
           }
           /*调整边框宽度和颜色来控制小黑圈和小白圈周围的样式*/
           /* .border{
               width: 499px;
               height: 499px;
               border: 1px solid black;
               border-radius: 50%;
           } */
           /*这一步可以省略，主要是为了设置左边白色区域的黑边框，更美观，也可以通过为整个页面设置背景颜色使得边框效果更明显*/
           body{
               background-color: lemonchiffon;
           }
       </style>
   </head>
   <body>
       <div class="border">
       <div class="all">
           <div class="top"></div>
           <div class="bottom"></div>
       </div>
       </div>
   </body>
</html>

2.伪元素写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@keyframes mytaiji{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.all{
				width: 0;
				height: 500px;
				border-radius: 50%;
				border-left: 250px solid white;
				border-right: 250px solid black;
				animation: mytaiji 2s infinite linear;
			}
			.all::before,.all::after{
				height: 90px;
				width: 90px;
				border: 80px solid red;
				border-radius: 50%;
				content: "";          /*content属性在伪元素选择器中建议写上，尽管不添加内容也写上*/
				display: block;        /*将元素转化为块元素，支持设置宽高等属性*/
				margin-left: -125px;
			}
			.all::before{
				border: 80px solid white;
				background-color: black;
			}
			.all::after{
				border: 80px solid black;
				background-color: white;
			}
			body{
				background-color: cornsilk;
			}
		</style>
	</head>
	<body>
		<div class="all"></div>
	</body>
</html>