gsap+svg实现可拖动位置网格动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：gsap+svg实现可拖动位置网格动画效果代码，可拖动每个网格内的svg动画。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap");
:root {
  --color-blue: #154084;
  --color-red: #9d2719;
  --color-yellow: #d7b418;
  --color-white: #fff3e7;
  --color-black: #222222;
  --box-size: 200px;
  font-family: "Tilt Warp", sans-serif;
  color: var(--color-text);
  background-color: var(--color-black);
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#print_container {
  padding: 12px;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.title_container {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.title {
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 600;
  letter-spacing: -2px;
  color: var(--color-black);
  margin: 0;
}

.color_pallet {
  display: flex;
}

.color_pallet div {
  width: 20px;
  height: 20px;
}

.color_pallet .blue {
  background-color: var(--color-blue);
}

.color_pallet .red {
  background-color: var(--color-red);
}

.color_pallet .yellow {
  background-color: var(--color-yellow);
}

.color_pallet .black {
  background-color: var(--color-black);
}

#grid_container {
  position: relative;
  width: calc(var(--box-size) * 4);
  height: calc(var(--box-size) * 4);
}

.cell {
  position: absolute;
  pointer-events: none;
  /* border: 1px solid #ffffff82; */
}

.box {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--box-size);
  height: var(--box-size);
  line-height: var(--box-size);
  cursor: pointer;
  overflow: hidden;
}

.box-content {
  height: 100%;
  background-color: white;
}
</style>

 
  
  
</head>

<body translate="no">
  <div id="print_container">
	<div id="grid_container">
		<!-- Following Eye -->
		<div class="box">
			<div class="box-content">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
					<defs>
						<clipPath id="clip-mask">
							<path fill="none" d="M95.86 50S75.33 79.47 50 79.47 4.14 50 4.14 50 24.67 20.53 50 20.53 95.86 50 95.86 50Z" />
						</clipPath>
					</defs>
					<path fill="var(--color-blue)" d="M0 0h100v100H0z" />
					<g class="eye">
						<path fill="var(--color-white)" d="M95.86 50S75.33 79.47 50 79.47 4.14 50 4.14 50 24.67 20.53 50 20.53 95.86 50 95.86 50Z" />
						<g clip-path="url(#clip-mask)">
							<circle class="eye-pupil" cx="50" cy="50" r="20.91" fill="var(--color-black)" />
						</g>
					</g>
				</svg>
			</div>
		</div>
		<!-- ROTATING STARS -->
		<div class="box">
			<div class="box-content">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
					<path fill="var(--color-blue)" d="M0 0h100v100H0z" />
					<path class="star" d="M42.74 25.48c-10.29 0-18.64-8.34-18.64-18.64 0 10.29-8.34 18.64-18.64 18.64 10.29 0 18.64 8.34 18.64 18.64 0-10.29 8.34-18.64 18.64-18.64Z" fill="var(--color-white)" />
					<path class="star" d="M94.54 25.48c-10.29 0-18.64-8.34-18.64-18.64 0 10.29-8.34 18.64-18.64 18.64 10.29 0 18.64 8.34 18.64 18.64 0-10.29 8.34-18.64 18.64-18.64Z" fill="var(--color-white)" />
					<path class="star" d="M42.74 74.52c-10.29 0-18.64-8.34-18.64-18.64 0 10.29-8.34 18.64-18.64 18.64 10.29 0 18.64 8.34 18.64 18.64 0-10.29 8.34-18.64 18.64-18.64Z" fill="var(--color-white)" />
					<path class="star" d="M94.54 74.52c-10.29 0-18.64-8.34-18.64-18.64 0 10.29-8.34 18.64-18.64 18.64 10.29 0 18.64 8.34 18.64 18.64 0-10.29 8.34-18.64 18.64-18.64Z" fill="var(--color-white)" />
				</svg>
			</div>
		</div>
		<!-- MORPHING BOXES -->
		<div class="box">
			<div class="box-content">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
					<defs>
						<clipPath id="a">
							<path fill="none" d="M0 0h100v100H0z" />
						</clipPath>
					</defs>
					<path fill="var(--color-blue)" d="M0 0h100v100H0z" />
					<g clip-path="url(#a)">
						<g id="circles">
							<g class="circle">
								<circle cx="50" cy="50" r="50" fill="var(--color-white)" />
								<path d="M100 50c0 27.61-22.39 50-50 50V0c27.61 0 50 22.39 50 50Z" fill="var(--color-black)" />
							</g>
							<g class="circle">
								<circle cx="50" cy="250" r="50" fill="var(--color-white)" />
								<path d="M100 250c0 27.61-22.39 50-50 50V200c27.61 0 50 22.39 50 50Z" fill="var(--color-black)" />
							</g>
							<g class="circle">
								<circle cx="50" cy="150" r="50" fill="var(--color-white)" />
								<path d="M0 150c0-27.61 22.39-50 50-50v100c-27.61 0-50-22.39-50-50Z" fill="var(--color-black)" />
							</g>
						</g>
					</g>
				</svg>
			</div>
		</div>
		<!-- HALF CIRCLES -->
		<div class="box">
			<div class="box-content">
				<svg id="morph-boxes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
					<path fill="var(--color-blue)" d="M0 0h100v100H0z" />
					<path id="morph-box-1" class="morph-box" d="M28.88 8.4H9.87v19.01l19.01 19.01h19.01V27.41L28.88 8.4z" fill="var(--color-black)" />
					<path id="box-top-1" d="M9.87 8.4h19.01v19.01H9.87z" fill="var(--c.........完整代码请登录后点击上方下载按钮下载查看