gsap钻石动画效果代码-html代码-BFW代码库

gsap钻石动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap钻石动画效果代码，钻石连线旋转动画

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
/* css needs serious clean up */
.outer-top,
.inner-top,
.lower-inner,
.lower-outer {
	position: absolute;
	background: transparent;
	border-radius: 50%;
}
.diamond-bottom {
	font-size: 2rem;
	color: gold;
	position: absolute;
	left: 50%;
	bottom: 25%;
	transform: translateX(-50%);
}
.diamond-bottom2 {
	font-size: 2rem;
	color: gold;
	position: absolute;
	left: 50%;
	bottom: -12%;
	transform: translateX(-50%);
}
.diamond-top {
	font-size: 2rem;
	color: gold;
	position: absolute;
	left: 50%;
	bottom: 96%;
	transform: translateX(-50%);
}
.tick {
	width: 1px;
	height: 15vmin;
	background: rgba(255, 231, 102, 1);
	border-radius: 50%;
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
}
.tick-bottom {
	width: 1px;
	height: 18vmin;
	background: rgba(255, 231, 102, 1);
	border-radius: 50%;
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translateX(-50%);
}

.outer-top {
	width: 95%;
	height: 95%;
	border-top: 1px solid rgba(255, 215, 0, 1);
}
.inner-top {
	position: absolute;
	width: 20%;
	height: 20%;
	background: transparent;
	.........完整代码请登录后点击上方下载按钮下载查看