div+css实现太极八卦阴阳盘旋转动画效果代码-html代码-BFW代码库

div+css实现太极八卦阴阳盘旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现太极八卦阴阳盘旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
	--left-color:#084C61;
	--right-color:#DB3A34;
	--bg-color:#FFC857;
	
	--rotate-duration:5s;
}

body {
	margin:0;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background:var(--bg-color);
}

#yinyang {
	display:table;
	font-size:0;
	animation-name:rotate;
	animation-duration:var(--rotate-duration);
	animation-iteration-count:infinite;
	animation-timing-function:ease;
	border-radius:100%;
	box-shadow:0px 0px 100px black;
}

@keyframes rotate {
	0% {transform:rotateZ(0);}
	50% {transform:rotateZ(180deg);}
	100% {transform:rotateZ(360deg);}
}

.half {
	display:inline-block;
	width:90px;
	height:180px;
}

#lefthalf {
	border-bottom-left-radius:180px;
	border-top-left-radius:180px;
	background:var(--left-color);
}

#righthalf {
	border-bottom-right-radius:180px;
	border-top-right-radius:180px;
	background:var(--right-color);
}

.inner {
	width:90px;
	height:90px;
	backgroun.........完整代码请登录后点击上方下载按钮下载查看