HTML实现旋转太极图

最新推荐文章于 2022-08-12 08:38:22 发布

“代码不会飞”

最新推荐文章于 2022-08-12 08:38:22 发布

阅读量773

点赞数 2

分类专栏：前端HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_43711597/article/details/121618140

版权

前端HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML实现旋转太极图

效果图

在这里插入图片描述

前端实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03实现旋转太极图</title>
		<style type="text/css">
		*{margin: 0;padding: 0;}
		#box{width: 300px;height: 300px;margin: 100px;position: relative;animation: move 30s infinite linear;}
			#black{
				height: 300px;
				width: 300px;
				background-color: #000000;
				border-radius: 50%;
			}
			#white{
				height: 300px;
				width: 150px;
				background-color: white;
				border-top-right-radius: 150px;
				border-bottom-right-radius: 150px;
				position: absolute;
				top: 0;
				right: 0;
			}
			#bb{
				width: 150px;
				height: 150px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				top: 0;
				left: 75px;
			}
			#ww{
				width: 150px;
				height: 150px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
				top: 150px;
				left: 75px;
			}
			#bbl{
				width: 40px;
				height: 40px;
				background-color: #000000;
				border-radius: 50%;
				position: absolute;
				/**
				 * 要想在中间就要剪去小圆的
				 */
				bottom: 55px;
				left: 130px;
			}
			#wwl{
				width: 40px;
				height: 40px;
				background-color: #FFFFFF;
				border-radius: 50%;
				position: absolute;
				/**
				 * 要想在中间就要剪去小圆的
				 */
				top: 55px;
				left: 130px;
			}
			@keyframes move{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<h2>03实现旋转太极图</h2>
		<div id="box">
			<div id="black">
				
			</div>
			<div id="white">
				
			</div>
			<div id="bb">
				
			</div>
			<div id="ww">
				
			</div>
			<div id="bbl">
				
			</div>
			<div id="wwl">
				
			</div>
		</div>
		
	</body>
</html>

“代码不会飞”

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML实现旋转太极图

HTML实现旋转太极图效果图前端实例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>03实现旋转太极图</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width: 300px;height: 300px;margin: 100px;positi
复制链接

扫一扫