【WEB项目】旋转太极

已于 2022-09-27 12:35:19 修改
阅读量459 收藏 3
点赞数 2
分类专栏： WEB项目 文章标签： html css 炫酷 web 太极
于 2019-11-26 16:01:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37443884/article/details/103258115
版权

样式分析

在这里插入图片描述
可以看出，要想实现着这种效果的话。我们可以使用嵌套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>
popup3721
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
2020年最新使用css3实现太极图旋转只用一个div
斑码教育的博客
10-20 258
知识点：边框 + 旋转 + 过渡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
网页实现太极
08-19
一个简单的HTML5的太极，所用甚检不吝指教。欢迎来交流交流
旋转太极
小森呀
06-16 319
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转太极</title> <style type="text/css"> *{ margin: 0; padding: 0; } .bg{ ...
旋转太极图
01-02
flash as3.0 旋转太极图
WEB小实践(2)--太极图
weixin_40025586的博客
10-20 341
** 一.知识略解： ** 1.渐变色：linear-gradient:(direction, color-stop1, color-stop2, …) 例如：linear-gradient(#000 50%,#fff 50%);//direction默认方向是to bottom,即向下填充linear-gradient(#000 50%,#fff 50%); 2.弹性盒模型：display:fl...
太极旋转简单实现
qq_44953009的博客
03-08 383
第一次写博客 操作一脸懵逼 第二次写这玩意, 第一次写的时候用的拼接法, 繁琐且累赘. 直接上图 : !-- 思路 : 1 大盒子对半线性渐变 实现黑白半圆 2 中圆及小圆都用伪元素 3 给小圆宽高 中圆用小圆的 border值 实现 4 flex 主轴为 x轴 元素会排列在一行上 垂直居中压住 <!DOCTYPE html> <html lang="en"&...
Canvas制作旋转的太极的示例
09-27
通过CSS实现元素的定位和旋转动画，利用Canvas的绘图方法绘制复杂的形状，最终形成具有视觉吸引力的旋转太极图。这对于学习HTML5的Canvas特性和理解动态Web图形的实现方式具有很高的参考价值。此外，了解并掌握这些...
html5+css3实现响应式旋转太极
01-02
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
html+css3实现可以旋转的太极图案效果.zip
最新发布
09-25
在创建旋转太极图案时，CSS3的`transform`属性是非常关键的，它可以用来改变元素的大小、位置、形状等，包括旋转（`rotate()`函数）。此外，`transition`属性可以添加平滑的过渡效果，当太极图案改变状态时，如开始...
太极旋转-JS实现
weixin_30359021的博客
12-08 210
　　刚学了js的一些函数，所以做了一个太极的旋转。做完之后是上面这个样子的，是可以旋转的。 　　思路： 　　1.先做一个基准转盘，之后将元素都放在转盘上，跟随转盘动。 　　2.画两个半圆，主要属性是border-top-right-radius:250px; 像素值为长边的一半。 　　3.然后画4个圆，以基准转盘为父元素，按照下面黑色圆一样的思路再画另外一边白色的圆...
旋转太极html源码,HTML5 太极旋转动画
weixin_42299244的博客
06-23 226
点击这里可以看动画效果：http://www.108js.com/article/article3/zip1/30229/Test2.html效果图： 代码：your browser does not support the canvas tag var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext...
HTML5实现旋转的太极
我的专栏
05-24 1834
DOCTYPE html> html> head> meta charset="utf-8" /> title>title> style> #canvas2{ border: 1px solid black; } style> head> body> canvas id="canvas2" width="600p
java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）
weixin_36021461的博客
02-28 285
这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转(用到css3 animation动画属性)，此图通过css3纯代码实现，它由 若干个小圆组合而成，适合初学css3的人练练手，娱以 致学，增加学习的乐趣。HTML部分：CSS部分：.square {width: 400px;height: 400px;position: relative;transform: rotate(45de...
web前端之太极八卦图的实现、旋转动画、定位、角度、坐标、JavaScript、animation、html、css
03-10 4013
web前端之太极八卦图的实现、旋转动画、定位、角度、坐标、JavaScript、animation、html、css
「前端特效」----旋转太极图
weixin_45915891的博客
04-20 249
效果图：click here 代码：纯css实现 <!-- html代码 --> <div class='box_taiji'></div> /* css代码 */ body{background:#cfcfcf} .box_taiji{ width:0; height:400px; border-left:200px solid #000; bord...
web太极八卦图纯css
qq_43399648的博客
05-30 478
我咋感觉画的不太像啊，哈哈哈哈哈哈哈哈哈 凑合看吧，略略略 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .aa{ height: 500px;...
Demo13：div实现太极旋转
ljl_web的博客
02-27 438
div实现太极旋转使用div（非canvas）实现太极旋转使用div border相关属性绘制太极图案，结合动画功能完成旋转，如图： 代码实现<!DOCTYPE html> <html> <head> <title>太极</title> <meta charset="utf-8" /> <style> body{ background-color:#66fff
用html和css画太极图,用CSS纯代码画一个旋转的太极图的方法
weixin_34931370的博客
06-20 402
用CSS纯代码画一个旋转的太极图的方法发布时间：2020-09-14 14:57:21来源：亿速云阅读：129作者：小新小编给大家分享一下用CSS纯代码画一个旋转的太极图的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！HTML部分：CSS部分：.square {width: 400px;height: 400px;p...
processing太极旋转
06-10
您可以通过使用processing语言中的rotate()函数来实现太极旋转效果。具体步骤如下： 1. 创建一个太极图形，可以使用processing中的ellipse()函数和fill()函数来绘制黑白两色的圆形。 2. 将太极图形的坐标系原点...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值