css实现文字遮罩2022新年动画效果代码-html代码-BFW代码库

css实现文字遮罩2022新年动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字遮罩2022新年动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,800italic,800,600,700,400'>

    <style>
        .title, .title__inner {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 0);
          font-size: 13rem;
        }
        .title::after, .title::before, .title__inner::after, .title__inner::before {
          content: "2022";
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 0);
          font-family: 'Open Sans', sans-serif;
          z-index: -1;
        }
        
        .title {
          color: transparent;
        }
        .title::after {
          color: #00b4f4;
          -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
          font-weight: 300;
          animation: path-1 7s -1s ease infinite;
        }
        .title::before {
          color: #fe9400;
          -webkit-clip-path: polygon(10% 0, 0 9%, 0 91%, 8% 100%, 91% 100%, 100% 90%, 90% 82%, 81% 89%, 17% 89%, 11% 81%, 10% 18%, 18% 10%, 81% 9%, 91% 20%, 90% 83%, 100% 89%, 100% 11%, 86% 0);
          text-stroke: 2px rgba(10, 100, 250, 0);
          text-fill-color: transparent;
          font-weight: 700;
          animation: path-2 7s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }
        
        @keyframes path-1 {
          20% {
            color: #f23737;
            -webkit-clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
            font-weight: 800;
          }
          40% {
            color: #e383ea;
            -webkit-clip-path: polygon(99% 0, 100% 0, 100% 100%, 100% 100%);
            font-weight: 300;
          }
          80% {
            color: #69f4e2;
            -webkit-clip-path: polygon(40% 0, 50% 0, 50% 100%, 40% 100%);
            font-weight: 400;
          }
        }
        @keyframes path-2 {
          40%, 90% {
            -webkit-clip-path: polygon(31% 11%, 13% 28%, 22% 70%, 30% 81%, 73% 81%, 76% 50%, 67% 55%, 63% 73%, 37% 72%, 31% 64%, 24% 33%, 32% 24%, 57% 20%, 64% 34%, 43% 45%, 48% 56%, 79% 39%, 65% 10%);
          }
          20%, 70% {
            -webkit-clip-path: polygon(45% 51%, 45% 53%, 44% 53%, 45% 52%, 45% 51%, 44% 51%, 45% 51%, 45% 52%, 43% 52%, 44% 53%, 45% 51%, 46% 53%, 45% 51%, 43% 54%, 44% 53%, 45% 54%, 43% 52%, 45% 51%);
            text-stroke: 6px #6450ff;
          }
          100% {
            -webkit-clip-path: polygon(10% 0, 0 9%, 0 91%, 8% 100%, 91% 100%, 100% 90.........完整代码请登录后点击上方下载按钮下载查看