Happy New Year 2022 HTML & CSS Code Design With Source Code

Happy new year HTML and CSS code

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy New Year</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div class="title">
        <div class="title__inner"></div>
    </div>

</body>

</html>

CSS

.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-10 70s -10s 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%, 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(255, 100, 250, 0);
    }
  }
  .title__inner {
    color: transparent;
  }
  .title__inner::after {
    color: #906b92;
    -webkit-clip-path: polygon(0 7%, 4% 0, 20% 0, 0 20%);
    font-weight: 600;
    animation: path-3 7s -1s ease infinite;
  }
  .title__inner::before {
    color: #4fb3a7;
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 7% 100%, 7% 5%, 95% 5%, 95% 93%, 10% 93%, 11% 100%, 100% 100%, 100% 0%);
    text-stroke: 2px rgba(255, 255, 255, 0);
    text-fill-color: transparent;
    font-weight: 800;
    font-style: italic;
    animation: path-4 7s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  }
  
  @keyframes path-3 {
    20%, 70% {
      color: #fff;
      -webkit-clip-path: polygon(86% 100%, 100% 82%, 100% 93%, 97% 100%);
      font-weight: 300;
    }
    40% {
      color: #b1e3ea;
      -webkit-clip-path: polygon(0 93%, 93% 0, 100% 8%, 8% 100%);
      font-weight: 800;
    }
    100% {
      color: #fff;
      -webkit-clip-path: polygon(0 7%, 4% 0, 20% 0, 0 20%);
    }
  }
  @keyframes path-4 {
    80% {
      -webkit-clip-path: polygon(0 0, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0);
    }
    40% {
      -webkit-clip-path: polygon(39% 20%, 4% 98%, 11% 93%, 60% 20%, 83% 14%, 45% 65%, 25% 78%, 17% 89%, 66% 69%, 94% 6%);
      text-stroke: 1px #c8fa00;
    }
    0%, 100% {
      -webkit-clip-path: polygon(0% 0%, 0% 100%, 7% 100%, 7% 5%, 95% 5%, 95% 93%, 10% 93%, 11% 100%, 100% 100%, 100% 0%);
    }
  }
  * {
    margin: 0;
    padding: 0;
  }
  
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }
  
  html,
  body {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
  }
  
  body {
    background: #27292a;
    font-family: 'Open Sans', sans-serif;
  }

 

Hello my name is Mohammad didar and I am the frontend designer of adoff framework

Related Posts

Leave a Reply

Your email address will not be published.