css+js实现旋转八卦图

 admin  WEB  2021-11-27

实现效果:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>八卦</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box{
				width: 100px;
				height: 100px;
				/* background: red; */
				position: relative;
				animation: anim 5s infinite linear;
			}
			.yinyang,.yinyangf{
				width: 96px;
				height: 48px;
				background: #fff;
				border-color: #000;
				border-width: 2px 2px 50px 2px;
				border-radius: 100%;
				border-style: solid;
				position: absolute;
			}
			.yinyang::before,.yinyangf::before{
				content: '';
				width: 12px;
				height: 12px;
				position: absolute;
				background: #fff;
				border: 18px solid #000;
				border-radius: 100%;
				top: 26px;
			}
			.yinyang::after,.yinyangf::after{
				content: '';
				width: 12px;
				height: 12px;
				position: absolute;
				background: #000;
				border: 18px solid #fff;
				border-radius: 100%;
				top: 26px;
				right: 0px;
			}
			.fangda{
				animation: da 1.5s;
			}
			@keyframes anim{
				to{
					transform: rotate(360deg);
				}
			}
			@keyframes da{
				to{
					transform: scale(2);
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="yinyang"></div>
			<div class="yinyangf"></div>
		</div>
	</body>
</html>
<script src="jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(".box").click(function(){
		$(".yinyangf").addClass("fangda");
		setTimeout(function(){
			$(".yinyangf").removeClass("fangda");
		},1500)
	})
</script>