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;
	border-top: 1px solid gold;
	border-radius: 50%;
}

.lower-inner {
	width: 40%;
	height: 40%;
	border-bottom: 3px solid rgba(255, 215, 0, 1);
	box-shadow: 0 30px 30px -10px rgba(255, 215, 0, 1);
}

body {
	display: grid;
	place-items: center;
	width: 100vw;
	height: 100vh;
	background: #1c0030;
	overflow: hidden;
}

.wrap {
	width: 40vw;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
</style>


</head>

<body>
  <!-- just doodling ... as you do -->
<div class="wrap">
	<div class="inner-top&q.........完整代码请登录后点击上方下载按钮下载查看