【WEB项目】旋转太极

popup3721

已于 2022-09-27 12:35:19 修改

阅读量467

点赞数 2

分类专栏： WEB项目文章标签： html css 炫酷 web 太极

于 2019-11-26 16:01:26 首次发布

本文链接：https://blog.csdn.net/qq_37443884/article/details/103258115

版权

WEB项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

样式分析

在这里插入图片描述
可以看出，要想实现着这种效果的话。我们可以使用嵌套div标签

框架分析

通过三层布局堆叠就可以实现想基本的布局框架，这三层分别为：最外层的大圆，内层中型圆和最里面的小圆组成

代码分析

通过div标签嵌套使用就可以实现其原始框架，具体代码如下

<html>
	...
	...
	<body>
		<div class="box">
			<!-- 最外层的圆 -->
			<div class="big-circle">
				<!-- 中型上面的圆 -->
				<div class="circle" id="top-circle">
					<!-- 上面的最小圆 -->
					<div class="small-circle" id="top-small-circle">
					</div>
				</div>
				<!-- 中型下面的圆 -->
				<div class="circle" id="bottom-circle">
					<!-- 下面的最小圆 -->
					<div class="small-circle" id="bottom-small-circle">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

CSS分析

做完上面的代码，本项目的HTML代码的div标签嵌套框架已经实现了，但是我们想要实现太极效果的话，还得在CSS部分进行继续编辑，具体代码如下

 /*去除所有元素的默认边距*/
 * {
 	padding: 0;
 	margin: 0;
 }
 
 /*定义内容区域的属性*/
 .box {
 	height: 400px;
 	width: 400px;
 	margin: 0 auto;
 }
 
 /*定义最大圆形的属性*/
 .big-circle{
 	border-radius: 50%;
 	/*给大圆添加线性背景*/
 	background: linear-gradient(90deg, #000 50%, #fff 50%);
 	box-shadow: 0 0 10px #000;
 }
 
 /**中型圆**/
 .circle {
 	height: 120px;
 	width: 200px;
 	margin: 0 auto;
 	padding-top: 80px;
 	border-radius: 50%;
 }
 
 /**上面的中型圆**/
 #top-circle {
 	background-color: #000;
 }
 
 /**下面的中型圆**/
 #bottom-circle {
 	margin-top: 0px;
 	background-color: #fff;
 }
 
 /**小圆类**/
 .small-circle {
 	height: 40px;
 	width: 40px;
 	margin: 0 auto;
 	border-radius: 50%;
 }
 
 /**上面的小圆**/
 #top-small-circle {
 	background-color: #fff;
 }
 
 /**下面的小圆**/
 #bottom-small-circle {
 	background-color: #000;
 }

动画实现

完成以上几个步骤就可以实现一个静态太极图形了，但是我们还可以给太极加上动画效果，我们要想使得整个太极旋转，就应该使最大的圆进行旋转

添加旋转动画

/*添加CSS3动画*/
@-webkit-keyframes taiji {
	/*动画开始前旋转角度为0度*/
	0% {
		transform: rotate(0deg);
	}
	/*动画完成后的旋转角度为360度*/
	100% {
		transform: rotate(360deg);
	}
}

在大圆中使用旋转动画

/*在大圆中使用动画*/
animation:taiji 2s linear infinite;

这样我们就可以实现旋转太极了！

以下是全部代码

<html>
	<head>
		<style>
			/*去除所有元素的默认边距*/
			* {
				padding: 0;
				margin: 0;
			}
	
			/*定义内容区域的属性*/
			.box {
				height: 400px;
				width: 400px;
				margin: 0 auto;
			}

			/*定义最大圆形的属性*/
			.big-circle{
                border-radius: 50%;
                /*给大圆添加线性背景*/
                background: linear-gradient(90deg, #000 50%, #fff 50%);
                box-shadow: 0 0 10px #000;
                /*在大圆中使用动画*/
                animation:taiji 2s linear infinite;
      		}

            /**中型圆**/
            .circle {
                height: 120px;
                width: 200px;
                margin: 0 auto;
                padding-top: 80px;
                border-radius: 50%;
            }

            /**上面的中型圆**/
            #top-circle {
                background-color: #000;
            }

            /**下面的中型圆**/
            #bottom-circle {
                margin-top: 0px;
                background-color: #fff;
            }

            /**小圆类**/
            .small-circle {
                height: 40px;
                width: 40px;
                margin: 0 auto;
                border-radius: 50%;
            }

            /**上面的小圆**/
            #top-small-circle {
                background-color: #fff;
            }

            /**下面的小圆**/
            #bottom-small-circle {
                background-color: #000;
            }
			/*添加CSS3动画*/
            @-webkit-keyframes taiji {
                /*动画开始前旋转角度为0度*/
                0% {
                    transform: rotate(0deg);
                }
                /*动画完成后的旋转角度为360度*/
                100% {
                    transform: rotate(360deg);
                }
            }
		</style>
	</head>
<body>
	<div class="box">
		<!-- 最外层的圆 -->
		<div class="big-circle">
			<!-- 中型上面的圆 -->
			<div class="circle" id="top-circle">
				<!-- 上面的最小圆 -->
				<div class="small-circle" id="top-small-circle">
				</div>
			</div>
			<!-- 中型下面的圆 -->
			<div class="circle" id="bottom-circle">
				<!-- 下面的最小圆 -->
				<div class="small-circle" id="bottom-small-circle">
				</div>
			</div>
		</div>
	</div>
</body>