gsap+svg实现可拖动位置网格动画效果代码
代码语言：html
所属分类：拖放
代码描述：gsap+svg实现可拖动位置网格动画效果代码，可拖动每个网格内的svg动画。
代码标签： gsap+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(--color-white)" />
<path id="morph-box-2" class="morph-box" d="M73.18 8.4H54.17v19.01l19.01 19.01h19.01V27.41L73.18 8.4z" fill="var(--color-black)" />
<path id="box-top-2" d="M54.17 8.4h19.01v19.01H54.17z" fill="var(--color-white)" />
<path id="morph-box-3" class="morph-box" d="M28.88 53.58H9.87v19.01L28.88 91.6h19.01V72.59L28.88 53.58z" fill="var(--color-black)" />
<path id="box-top-3" d="M9.87 53.58h19.01v19.01H9.87z" fill="var(--color-white)" />
<path id="morph-box-4" class="morph-box" d="M73.18 53.58H54.17v19.01L73.18 91.6h19.01V72.59L73.18 53.58z" fill="var(--color-black)" />
<path id="box-top-4" d="M54.17 53.58h19.01v19.01H54.17z" fill="var(--color-white)" />
<g class="morph-shapes">
<polygon id="morph-shape-4" points="92.19 72.59 73.18 72.59 73.18 91.6 73.18 91.6 92.19 91.6 92.19 72.59 92.19 72.59" fill="none" />
<polygon id="morph-shape-2" points="92.19 27.41 73.18 27.41 73.18 46.42 73.18 46.42 92.19 46.42 92.19 27.41 92.19 27.41" fill="none" />
<polygon id="morph-shape-1" points="47.89 27.41 28.88 27.41 28.88 46.42 28.88 46.42 47.89 46.42 47.89 27.41 47.89 27.41" fill="none" />
<polygon id="morph-shape-3" points="47.89 72.59 28.88 72.59 28.88 91.6 28.88 91.6 47.89 91.6 47.89 72.59 47.89 72.59" fill="none" />
</g>
</svg>
</div>
</div>
<!-- FOLLOWING STARS -->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<clipPath id="half-circle-clip-path">
<path fill="none" d="M0 0h100v100H0z" />
</clipPath>
</defs>
<path fill="var(--color-yellow)" d="M0 0h100v100H0z" />
<g clip-path="url(#half-circle-clip-path)">
<g id="half-circles">
<path id="half-circle-1" class="half-circle" d="M0 50C0 22.39 22.39 0 50 0v100C22.39 100 0 77.61 0 50Z" fill="var(--color-blue)" />
<path id="half-circle-2" class="half-circle" d="M50 50c0-27.61 22.39-50 50-50v100c-27.61 0-50-22.39-50-50Z" fill="var(--color-blue)" />
<path id="half-circle-3" class="half-circle" d="M100 50c0-27.61 22.39-50 50-50v100c-27.61 0-50-22.39-50-50Z" fill="var(--color-blue)" />
<path id="half-circle-4" class="half-circle" d="M150 50c0-27.61 22.39-50 50-50v100c-27.61 0-50-22.39-50-50Z" fill="var(--color-blue)" />
</g>
</g>
</svg>
</div>
</div>
<!-- MORPHING HEART -->
<div class="box">
<div class="box-content">
<svg id="following-stars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="var(--color-red)" d="M0 0h100v100H0z" />
<path class="rotating-star" fill="var(--color-white)" d="M100 50C72.39 50 50 27.61 50 0c0 27.61-22.39 50-50 50 27.61 0 50 22.39 50 50 0-27.61 22.39-50 50-50Z" />
<path class="following-star" fill="var(--color-yellow)" d="M100 50C72.39 50 50 27.61 50 0c0 27.61-22.39 50-50 50 27.61 0 50 22.39 50 50 0-27.61 22.39-50 50-50Z" />
<path class="following-star" fill="var(--color-yellow)" d="M100 50C72.39 50 50 27.61 50 0c0 27.61-22.39 50-50 50 27.61 0 50 22.39 50 50 0-27.61 22.39-50 50-50Z" />
<path class="following-star" fill="var(--color-yellow)" d="M100 50C72.39 50 50 27.61 50 0c0 27.61-22.39 50-50 50 27.61 0 50 22.39 50 50 0-27.61 22.39-50 50-50Z" />
<path class="following-star" fill="var(--color-yellow)" d="M100 50C72.39 50 50 27.61 50 0c0 27.61-22.39 50-50 50 27.61 0 50 22.39 50 50 0-27.61 22.39-50 50-50Z" />
</svg>
</div>
</div>
<!-- DRAW SVG LINES -->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="var(--color-red)" d="M0 0h100v100H0z" />
<path id="morph-heart" fill="var(--color-white)" d="M50 15.05c-10.76-10.76-28.22-10.76-38.98 0C.25 25.82.25 43.27 11.02 54.04L50 93.02l38.98-38.98c10.76-10.76 10.76-28.22 0-38.98C78.22 4.3 60.76 4.3 50 15.06Z" />
<path id="morph-lip" fill="none" d="M89.74 42.61c-7-7.47-15.48-21.85-28.55-21.85-7.61 0-8.85 6.26-11.18 6.26s-3.58-6.26-11.18-6.26c-13.07 0-21.55 14.38-28.55 21.85-2.98 3.18-7.67 6.22-7.67 6.22s3.22 2.02 5.78 4.61c6.88 6.98 21.46 25.41 41.62 25.8 20.16-.39 34.75-18.82 41.62-25.8 2.56-2.6 5.78-4.61 5.78-4.61s-4.69-3.04-7.67-6.22Z" />
</svg>
</div>
</div>
<!-- STRIPES -->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="var(--color-yellow)" d="M0 0h100v100H0z" />
<path class="square-stroke" d="M21.25 0v50c0 15.88 12.87 28.75 28.75 28.75S78.75 65.88 78.75 50" fill="none" stroke="var(--color-blue)" stroke-miterlimit="10" stroke-width="10" />
<path class="square-stroke-right" d="M21.25 49.92c0-15.88 12.87-28.75 28.75-28.75s28.75 12.87 28.75 28.75V100" fill="none" stroke="var(--color-blue)" stroke-miterlimit="10" stroke-width="10" />
<path class="square-stroke" d="M28.88 0v50c0 11.66 9.46 21.12 21.12 21.12S71.12 61.66 71.12 50" fill="none" stroke="var(--color-white)" stroke-miterlimit="10" stroke-width="10" />
<path class="square-stroke-right" d="M28.88 49.92c0-11.66 9.46-21.12 21.12-21.12s21.12 9.46 21.12 21.12V100" fill="none" stroke="var(--color-white)" stroke-miterlimit="10" stroke-width="10" />
<path class="square-stroke" d="M36.51 0v50c0 7.45 6.04 13.49 13.49 13.49S63.49 57.45 63.49 50" fill="none" stroke="var(--color-red)" stroke-miterlimit="10" stroke-width="10" />
<path class="square-stroke-right" d="M36.51 49.92c0-7.45 6.04-13.49 13.49-13.49s13.49 6.04 13.49 13.49V100" fill="none" stroke="var(--color-red)" stroke-miterlimit="10" stroke-width="10" />
</svg>
</div>
</div>
<!-- RANDOM CIRCLES -->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M0 0h100v100H0z" fill="var(--color-yellow)" />
<circle class="random-circle" cx="50" cy="50" r="50" fill="var(--color-white)" />
<circle class="random-circle" cx="50" cy="50" r="40" fill="var(--color-blue)" />
<circle class="random-circle" cx="50" cy="50" r="30" fill="var(--color-red)" />
</svg>
</div>
</div>
<!-- STREACH BARS -->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="var(--color-white)" d="M0 0h100v100H0z" />
<g class="bar">
<path id="bar-1" d="M71.97 6.27c-6.07 0-10.98 4.92-10.98 10.98v52.27c0 6.07 4.92 10.98 10.98 10.98s10.98-4.92 10.98-10.98V17.25c0-6.07-4.92-10.98-10.98-10.98Z" fill="var(--color-red)" />
<circle id="bar-1-circle-1" cx="71.97" cy="17.25" r="10.98" fill="var(--color-blue)" />
<circle cx="71.97" cy="69.52" r="10.98" fill="var(--color-yellow)" />
<path id="morph-bar-1" d="M71.97 48.56c-6.07 0-10.98 4.92-10.98 10.98v9.98c0 6.07 4.92 10.98 10.98 10.98s10.98-4.92 10.98-10.98v-9.98c0-6.07-4.92-10.98-10.98-10.98Z" fill="none" />
</g>
<g class="bar">
<path id="bar-2" d="M50 22.42c-6.07 0-10.98 4.92-10.98 10.98v52.27c0 6.07 4.92 10.98 10.98 10.98s10.98-4.92 10.98-10.98V33.4c0-6.07-4.92-10.98-10.98-10.98Z" fill="var(--color-blue)" />
<circle cx="50" cy="33.41" r="10.98" fill="var(--color-yellow)" />
<circle id="bar-2-circle-2" cx="50" cy="85.68" r="10.98" fill="var(--color-black)" />
<path id="morph-bar-2" d="M50.06 22.42c-6.07 0-10.98 4.92-10.98 10.98v9.98c0 6.07 4.92 10.98 10.98 10.98s10.98-4.92 10.98-10.98V33.4c0-6.07-4.92-10.98-10.98-10.98Z" fill="none" />
</g>
<g class="bar">
<path id="bar-3" d="M28.15 7.27c-6.07 0-10.98 4.92-10.98 10.98v52.27c0 6.07 4.92 10.98 10.98 10.98s10.98-4.92 10.98-10.98V18.26c0-6.07-4.92-10.98-10.98-10.98Z" fill="var(--color-red)" />
<circle id="bar-3-circle-1" cx="28.15" cy="18.26" r="10.98" fill="var(--color-black)" />
<circle cx="28.15" cy="70.53" r="10.98" fill="var(--color-blue)" />
<path id="morph-bar-3" fill="none" d="M27.86 37.18c-6.06.09-10.81 5.31-10.81 11.38v22.01c0 6.07 4.74 11.28 10.81 11.38 6.15.1 11.16-4.86 11.16-10.98v-22.8c0-6.12-5.01-11.08-11.16-10.98Z" />
</g>
</svg>
</div>
</div>
<!-- ROTATING DISK-->
<div class="box">
<div class="box-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="var(--color-white)" d="M0 0h100v100H0z" />
<g id="disk">
<path fill="none" d="M0 0h100v100H0z" />
<path fill="var(--color-blue)" d="M100 50c0 27.61-22.39 50-50 50S0 77.61 0 50h100Z" />
</g>
<circle cx="50" cy="50" r="25" fill="var(--color-black)" />
</svg>
</div>
</div>
<!-- ARROWS -->
<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-white)" d="M0 0h100v100H0z" />
<g clip-path="url(#a)">
<path id="arrow-1" d="M50 0 0 50h100L50 0z" fill="var(--color-red)" />
<path id="arrow-2" d="M50 50 0 100h100L50 50z" fill="var(--color-black)" />
<path id="arrow-3" d="M50 100 0 150h100l-50-50z" fill="var(--color-red)" />
<path id="arrow-4" d="M50 150 0 200h100l-50-50z" fill="var(--color-black)" />
</g>
</svg>
</div>
</div>
<!-- LINE DRAWING -->
<div class="box">
<div class="box-content">
<svg id="lines" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect fill="var(--color-white)" width="100" height="100" />
<path class="line" fill="none" stroke="var(--color-blue)" stroke-miterlimit="10" stroke-width="1" stroke-linecap="round" d="M50 9.95v80.32" />
</svg>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0