文字错位动画遮罩效果-html代码-BFW代码库

文字错位动画遮罩效果

代码语言：html

所属分类：动画

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

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

<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  color: black;
  font-family: neue-haas-grotesk-display, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 21px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-display: block;
}

.container {
  position: relative;
  width: 716px;
  height: 1008px;
  visibility: hidden;
  background: red;
  cursor: pointer;
}

.jam {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 716px;
  height: 1008;
  fill: red;
}

.content {
  position: relative;
  z-index: 2;
  width: 716px;
  height: 100%;
  text-align: right;
  padding: 82px 40px;
}
.content p {
  margin: 0 0 48px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.content span {
  display: block;
}

.band {
  color: black;
  font-family: neue-haas-grotesk-display, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 51px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.guests {
  align-self: flex-end;
  position: absolute;
  right: 40px;
  bottom: 24px;
}
</style>

</head>
<body translate="no">
<div class="container">
<svg class="jam" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 716 1008">
<defs>
<mask id="jm-mask">
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
<path transform="translate(-14.18 394)" class="jm" fill="#000" d="M58.032,583.856 C91.884,583.856 120.9,576.602 142.662,557.258 C161.2,540.332 173.29,513.734 173.29,464.568 L173.29,11.596 L70.928,11.596 L70.928,460.538 C70.928,491.166 57.226,501.644 30.628,503.256 C22.568,504.062 13.702,503.256 4.03,503.256 L-1.13686838e-13,503.256 L-1.13686838e-13,578.214 C15.314,581.438 37.882,583.856 58.032,583.856 Z M333.148,442 L333.148,187.304 C333.148,126.854 375.06,84.942 422.614,84.942 C465.332,84.942 490.318,114.764 490.318,163.93 L490.318,442 L592.68,442 L592.68,187.304 C592.68,126.854 629.756,84.942 679.728,84.942 C721.64,84.942 749.85,114.764 749.85,163.93 L749.85,442 L852.212,442 L852.212,150.228 C852.212,57.538 800.628,0.312 712.774,0.312 C659.578,0.312 611.218,25.298 577.366,80.912 L575.754,80.912 C556.41,27.716 515.304,0.312 461.302,0.312 C402.464,0.312 359.746,28.522 332.342,76.882 L329.924,76.882 L329.924,11.596 L230.786,11.596 L230.786,442 L333.148,442 Z" />
</mask>
</defs>
<g fill="none" fill-rule="evenodd">
<rect class="bg" width="750" height="1008" fill="#DDE1D4" />
<g transform="translate(-14.18 394)">
<path class="a" fill="#00000A" fill-rule="nonzero" d="M221.052,454.284 C287.144,454.284 322.608,430.104 350.818,390.61 L352.43,390.61 C354.848,414.79 360.49,433.328 366.938,443 L490.256,443 L490.256,435.746 C478.972,428.492 474.136,409.954 474.136,376.102 L4.........完整代码请登录后点击上方下载按钮下载查看