gsap+svg实现5种文字字母三维动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg实现5种文字字母三维动画效果代码，往下滚动鼠标。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gluten:wght@500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;800&display=swap");
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1,
h2 {
  font-family: "Lilita One", cursive;
  font-size: 15vmin;
  letter-spacing: 0.2rem;
  transform-style: preserve-3d;
}
h1 span,
h2 span {
  position: relative;
  z-index: 2;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.background {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

section {
  perspective: 1500px;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  will-change: transform;
  overflow: hidden;
}

.word {
  --layers: 5;
  --depth: 30;
  --increment: 0.1vmin;
  --color: darkred;
  --color-front: red;
  --color-back: var(--color);
  z-index: 1;
  transform-style: preserve-3d;
  position: relative;
  transform: rotatey(0deg);
  margin: 0;
  padding: 0;
  display: inline-block;
}
.safari .word {
  --increment: 0.04vmin;
}
.word .letter {
  --layer-space: calc(var(--depth) / var(--layers));
  --zStack: calc((var(--layer) * var(--layer-space)) * var(--increment));
  --xPositionOffset: 50%;
  --yPositionOffset: 50%;
  --zPositionOffset: calc(var(--increment) * ((var(--depth) * 0.5) * var(--centerOffset)));
  transform-style: preserve-3d;
  position: relative;
  color: var(--color);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(calc((var(--x, 0) + var(--xOffset, 0)) * var(--increment))) translateY(calc(var(--y, 0) * var(--increment))) translateZ(calc(((var(--z, 0) - (var(--depth) * 0.5)) * var(--increment)) + var(--zStack))) rotateZ(calc(var(--rotateZ, 0) * 1deg)) rotateY(calc(var(--rotateY, 0) * 1deg)) rotateX(calc(var(--rotateX, 0) * 1deg));
  transform-origin: var(--xPositionOffset) var(--yPositionOffset) var(--zPositionOffset);
}
.word .letter.front {
  color: var(--color-front);
  display: inline-block;
}
.word .letter.under {
  position: absolute;
  top: 0;
  left: calc(var(--xPos, 0) * 1px);
  pointer-events: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
}
.word .letter.back {
  color: var(--color-back);
}

.boing {
  text-align: center;
  perspective: 500px;
}
.boing .background {
  background: #efefef;
}
.boing .background .sunburst {
  position: absolute;
  background: repeating-conic-gradient(#FFC2ED 0 15deg, #FFD6F3 15deg 30deg);
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  opacity: 0;
  -webkit-animation: spin 40s infinite linear;
          animation: spin 40s infinite linear;
  transform: translate(-50%, -50%) rotate(0deg);
}
.boing .word {
  --color: #444;
  --color-front: #444;
  --depth: 2;
  --layers: 4;
  display: block;
}

.intro {
  font-family: "Dosis", sans-serif;
  font-weight: 400;
  color: #333;
  text-align: center;
}
.intro h1 {
  font-weight: 400;
  font-size: max(5vmin, 30px);
  font-family: "Dosis", sans-serif;
}
.intro .word {
  --layers: 8;
  --depth: 0;
  --rotateAmount: 20deg;
  font-weight: 800;
  display: block;
  font-size: 15vmin;
  text-transform: uppercase;
  transform: rotateX(calc(var(--mouseX) * var(--rotateAmount))) rotateY(calc(var(--mouseY) * var(--rotateAmount)));
}
.intro p {
  font-size: 1.5em;
}
.intro .down-arrow {
  margin-top: 3em;
}

.hulk {
  overflow: unset;
}
.hulk .background {
  width: 150%;
  background: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%23893990" fill-opacity="0.4"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), #99549F;
  background-size: 6em;
  background-position: center;
}
.hulk .background .cracks {
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hulk .background .cracks path {
  display: none;
}
.hulk .background .cracks.smash-1 .crack-1 {
  display: block;
}
.hulk .background .cracks.smash-2 .crack-2 {
  display: block;
}
.hulk .background .cracks.smash-3 .crack-3 {
  display: block;
}
.hulk .background svg {
  width: 50em;
  padding-bottom: 10vmin;
}
.hulk .word {
  --color: #124B28;
  --color-front: #2D8950;
  --color-back: #45254B;
  --depth: 100;
  --layers: 6;
  text-transform: uppercase;
}
.hulk .word .back {
  opacity: 0.5;
}

.slide .word {
  --color: #fff;
  --color-front: #eee;
  --depth: 1;
  --layers: 6;
  transform: rotatey(-20deg) rotatex(15deg);
  text-transform: uppercase;
}

.oreo {
  perspective: 2000px;
}
.oreo .background {
  background: radial-gradient(#66A3DB, #2E4A9B);
}
.oreo .word {
  --depth: 60;
  --layers: 7;
  --color: #CED3D1;
  --color-front: #362E2D;
  --color-back: #00000044;
  text-transform: uppercase;
  font-size: 25vmin;
  letter-spacing: 0em;
}
.oreo .word [data-depth="6"] {
  --rotateY: 0 !important;
  --y: 1 !important;
  --z: 1 !important;
}
.oreo .word [data-depth="1"],
.oreo .word [data-depth="4"],
.oreo .word [data-depth="5"] {
  --color: var(--color-front);
}

.donut {
  perspective: 600px;
}
.donut .background {
  background: repeating-linear-gradient(-45deg, #606dbc00, #606dbc00 100px, #46529816 100px, #46529816 200px), radial-gradient(#BBE9F0, #3FACB9);
}
.donut .word {
  --layers: 7;
  --depth: 70;
  --color-front: #FFF4F7;
  --color-back: #3FACB9;
  --color: #F9AB59;
  font-size: 18vmin;
  font-family: "Gluten", cursive;
  text-transform: uppercase;
  font-weight: 900;
  transform: rotatex(35deg);
}
.donut .word .back {
  opacity: 0.3;
}
.donut .word [data-depth="0"],
.donut .word [data-depth="5"] {
  font-weight: 500;
  --xOffset: 5;
}
.donut .word [data-depth="1"],
.donut .word [data-depth="4"] {
  font-weight: 700;
  --xOffset: 2;
}
.donut .word [data-depth="2"],
.donut .word [data-depth="3"] {
  font-weight: 900;
}
.donut .word [data-depth="2"],
.donut .word [data-depth="4"] {
  --color: #F8C58E;
}
.donut .word [data-depth="3"] {
  --color: #FED89A;
}
.donut .word [data-index="0"] {
  --rotateZ: 20;
}
.donut .word [data-index="1"] {
  --y: 100;
}
.donut .word [data-index="2"] {
  --y: 10;
  --rotateZ: -15;
  --x: -15;
}
.donut .word [data-index="3"] {
  --y: 60;
}
.donut .word [data-index="5"] {
  --y: 60;
}
.donut .word .front[data-index="0"] {
  background: linear-gradient(25deg, transparent 0.2em, red 0.1em, red 0.23em, transparent 0.1em) 0.35em 0.09em/0.1em 0.29em no-repeat, linear-gradient(-25deg, transparent 0.2em, purple 0.1em, purple 0.23em, transparent 0.1em) 0.1em 0.09em/0.07em 0.29em no-repeat, linear-gradient(40deg, transparent 0.2em, orange 0.1em, orange 0.23em, transparent 0.1em) 0.1em 0.4em/0.07em 0.29em no-repeat, linear-gradient(-10deg, transparent 0.2em, red 0.1em, red 0.23em, transparent 0.1em) 0.15em 0.5em/0.06em 0.26em no-repeat, linear-gradient(20deg, transparent 0.2em, purple 0.1em, purple 0.22em, transparent 0.1em) 0.3em 0.5em/0.08em 0.26em no-repeat, linear-gradient(-40deg, transparent 0.2em, orange 0.1em, orange 0.22em, transparent 0.1em) 0.44em 0.45em/0.08em 0.26em no-repeat, linear-gradient(15deg, transparent 0.2em, red 0.1em, red 0.22em, transparent 0.1em) 0.54em 0.3em/0.08em 0.26em no-repeat, white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.donut .word .front[data-index="0"]::after {
  content: "";
  position: absolute;
  width: 0.12em;
  height: 0.13em;
  background-color: white;
  top: 67%;
  left: 30%;
  border-radius: 0 0 1em 1em;
  transform-origin: top center;
  transform: rotatex(-41deg) rotatey(5deg);
}
.donut .word .front[data-index="1"] {
  color: hotpink;
}
.donut .word .front[data-index="2"] {
  color: chocolate;
}
.donut .word .front[data-index="3"] {
  background: linear-gradient(25deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.13em/0.04em 0.29em no-repeat, linear-gradient(-25deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.09em/0.04em 0.26em no-repeat, linear-gradient(40deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.4em/0.04em 0.29em no-repeat, linear-gradient(-10deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.15em 0.5em/0.04em 0.26em no-repeat, linear-gradient(20deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.3em 0.5em/0.04em 0.26em no-repeat, linear-gradient(-40deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.44em 0.45em/0.04em 0.26em no-repeat, linear-gradient(15deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.3em/0.04em 0.26em no-repeat, linear-gradient(-23deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.15em/0.04em 0.26em no-repeat, linear-gradient(-23deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.45em/0.04em 0.26em no-repeat, linear-gradient(-7deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.42em 0.52em/0.04em 0.26em no-repeat, pink;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.donut .word .front[data-index="4"] {
  background: repeating-radial-gradient(white, white 0.1em, chocolate 0.101em, chocolate 0.125em), white;
  background-position: 9.45em 2.2em;
  background-size: 1.5em 1.5em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.donut .word [data-index="2"][data-depth="1"], .donut .word [data-index="2"][data-depth="4"] {
  --xOffset: 6;
}
.donut .word [data-index="2"].front, .donut .word [data-index="2"][data-depth="5"] {
  --xOffset: 10;
}
.donut .word [data-index="3"][data-depth="1"], .donut .word [data-index="3"][data-depth="5"] {
  --xOffset: 6;
}
.donut .word [data-index="3"].front, .donut .word [data-index="3"][data-depth="5"] {
  --xOffset: 10;
}
.donut .word.bite [data-index="1"] {
  -webkit-clip-path: path("M100 0H0v100h42.2a18.865 18.865 0 0 1-.642-4.895c0-8.755 5.972-16.116 14.065-18.23a18.935 18.935 0 0 1-.362-3.694c0-10.406 8.436-18.842 18.842-18.842 3.436 0 6.658.92 9.432 2.528C86.991 52.673 92.225 50 98.083 50c.647 0 1.287.033 1.917.096V0Z");
          clip-path: path("M100 0H0v100h42.2a18.865 18.865 0 0 1-.642-4.895c0-8.755 5.972-16.116 14.065-18.23a18.935 18.935 0 0 1-.362-3.694c0-10.406 8.436-18.842 18.842-18.842 3.436 0 6.658.92 9.432 2.528C86.991 52.673 92.225 50 98.083 50c.647 0 1.287.033 1.917.096V0Z");
}

@-webkit-keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>




</head>

<body>
  <section class="intro" data-animate-perspective>
  <div class="background"></div>
  <h1 aria-label="Experiments with 3D text in HTML">
    <span>Experiments with</span>
    <span class="word" aria-hidden="true" data-animation="intro">3D Text</span>
    <span> in HTML </span>
  </h1>
  <svg class="down-arrow" title="An arrow pointing down" viewBox="0 0 448 512" width="50">
    <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z" />
  </svg>
</section>

<section class="boing" >
  <div class="background"><div class="sunburst"></div></div>
  <h2 class="word" data-animation="boing">Boing!</h2>
  <p class="sr-only">Animation description: The heading starts in 2D with the dark grey word on a plain light grey background. As the word passes half way up the screen the letters all spring forward with each letter changing to a different color. The background changes to a rotating pink sunburst.</p>
</section>

<section class="oreo" data-animate-perspective>
  <div class="background"></div>
  <h2 class="word" data-animation="oreo">Oreos</h2>
  <p class="sr-only">Animation description: The letters a colored like an Oreo and start stacked together vertically, as if inside their packaging. As the page scrolls down the letters fall into their positions side by side. </p>
</section>

<section class="slide">
  <div class="background"></div>
  <h2 class="word" data-animation="slide">Slide out</h2>
  <p class="sr-only">Animation description: The heading starts in 2D with the letters all colored light grey. As the word passes half way up the screen the letters all smoothly slide forward to float above the page revealing they are 3D. Each letter changing to a different color.</p>
</section> 

<section class="hulk" data-animate-perspective>
  <div class="background">
    <div class="cracks">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1831 939" width="1831" height="939" fill="none">
        <defs>
          <g id="smoke">
            <circle cx="77.5" cy="141.5" r="77.5" fill="#A48DA955" />
            <circle cx="77.5" cy="60.5" r="60.5" fill="#A48DA955" />
            <circle cx="137.5" cy="99.5" r="77.5" fill="#A48DA955" />
          </g>
        </defs>
        <path class="crack-1" fill="#45254B" fill-rule="evenodd" d="M591.357 538.091 608.5 529l45 17.5 186.5 36 46-58.5 31.538 6.363L863.5 492 920 379.5v-18l-21.5-37H852l52.5-8.5 24.5 45.5v26L883.5 497l60.753 38.789L1032 556l82.5-27 98.5 27 9-9.5 60-11 21.1 3.388 45.12-8.224L1360 379.5l-47.5-74.5 9.5-80v80l59.5 74.5-20.79 148.886L1494.5 504l154.5 29.5L1803 403l-154 160.5-154.5-49-172.57 27.413 28.57 4.587 39.5 9.5h-52.5l-55.5-9.5-9.58 3.586L1381.5 652.5l57 42 56-11 53.5-43-53.5 54-56 18L1373 666l-122.18-107.833-46.32 17.333-14.36-6.358L1212.5 696l-9.5 120-1-126.5-29.27-128.067L1139 546.5h-33l-74 19-146-30-46 65.5-35.598-6.599L846 712.5 818 766l28 40-36.5-40 17-49-32.292-124.489-139.428-25.847L605.5 694.5l30.5 28-30.5-16H583l39 29 14 80.5-20-70-45.5-33.5-43.5 38-6 65.5 16.5 43.5-22 31.5 11.5-27-18.5-48-49 14.5 49-24.5 7-60 42-44 35-7.5 27.616-135.741L608.5 556 567 575.5l-1.655-.667L354 650l-47.5-9.5H354l193.036-73.041-9.829-3.959H229l-50.5 95-92 26.5 80.5-34.5 43.5-87L142 510l-2-59.5-139.5-15H158V504l38.5 29.5 26 16h84l207.77 4.761L495 546.5h80.5l5.711-3.029L605.5 337.5l-106-157L521 121l23-38.5-33 98 33 50.5 80 106.5-32.643 200.591Z" clip-rule="evenodd"/>
        <path class="crack-1" fill="#45254B" fill-rule="evenodd" d="M520.5 122 547 42.5 530.5 0 556 42.5 530.5 122h-10Zm153 210L617 357.5l-3.5 16.5 60.5-29 38.5 16.5-31-19 3.5-41h41l31.5-31.5-10.5-24.5 3 20-24 25.5h-41l4-74-15.5 115ZM478.554 548.387 453.5 556.5 413 568l87.967 38.936L470 676.5 387.5 717l89-37 44.5-76.848L577 585l61 10 49.03 5.91-13.53 40.59L689 745l-4-68.5 27.5 20.5v20l7-27-38-28 3.5-20.5 24.511-37.88L750 608.5l94.5 17 51-69 16.294 4.3-11.294 29.7 10.5 35 35.5 42.5-16.5 97.5 29 2.5-23-8 19.5-98-36.5-43.5-5-33.5 15.146-19.621L1003.5 585l79.5-17 95 17 64.84-10.159L1264.5 609l-16 71 8.5 31.5V675l16.5-71-19.12-30.968L1286.5 568h61l86-11.5 46 28.5 47-17h-47l-46-45.5-108-18.5-52.47 17.409-34.53-79.909-60.5-29-8.5-34 3.5 44.5 59 26 30.46 75.915-43.96 14.585-71-35.5-118.5 52.5-82.307-39.283L982 470l-4-47 51-31 26 7-26-15.........完整代码请登录后点击上方下载按钮下载查看