gsap文字动画效果-html代码-BFW代码库

gsap文字动画效果

代码语言：html

所属分类：动画

代码描述：gsap文字动画效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@font-face {
  font-family: "Public Sans Roman";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/PublicSans-Roman-VF.ttf");
}

:root {
  --dark-purple: hsl(285, 86%, 4%);
  --neon-blue: hsl(190, 100%, 75%);
  --neon-pink: hsl(303, 100%, 73%);
  --size: 10;
  --unit: calc((var(--size) / 100) * 1vmin);
}

* {
  box-sizing: border-box;
  font-family: "Public Sans Roman";
  font-variation-settings: "wght" 1000;
  margin: 0;
  padding: 0;
}

body {
  background: var(--dark-purple);
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.text {
  position: absolute;
  left: calc(100vw / 4);
  right: calc(100vw / 4);
  -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
          transform: rotate(-45deg) skew(15deg, 15deg);
  width: calc(500 * var(--unit));
  height: calc(600 * var(--unit));
  font-size: calc(160 * var(--unit));
  -webkit-text-fill-color: #ffffff00;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: var(--neon-pink);
  line-height: calc(160 * var(--unit));
  padding: calc(60 * var(--unit));
}

.left-side,
.bottom-side {
  position: absolute;
  background: none transparent;
  width: 0px;
  height: 0px;
}

.left-side {
  left: .........完整代码请登录后点击上方下载按钮下载查看