Home » HTML » Thank You Message in HTML and CSS (Followers Achieved)

Thank You Message in HTML and CSS (Followers Achieved)

By

Here is a beautiful example of HTML and CSS to show animated Thank You Message in HTML and CSS for the followers achieved.

Animated Thank You Message in HTML and CSS

HTML Code:

THANK YOU
<SPAN>3M</SPAN>
FOLLOWERS

<link href="https://fonts.googleapis.com/css2?family=Dosis:[email protected]&display=swap" rel="stylesheet">

CSS Code:

html {
  --color: red;
  display: grid;
  place-items:center;
  min-height: 100vh;
  font-family: 'Dosis', monospace;
  font-weight: 900;
  font-size: 10vw;
  text-align: center;
  background: radial-gradient(circle, var(--color) 2px, #111 2px);
  background-size: 20px 20px;
  color: #111;
  text-shadow:
    0 0 1px gold,
    0 0 1px gold,
    0 0 1px gold,
    0 0 1px gold,
    0 0 1px gold,
    0 0 10px black;
  perspective: 600px;
  animation: colorSwap 2s linear infinite;
}

body {
  animation: tilt 10s linear infinite;
}
@keyframes tilt {
  25% { transform: rotateX(25deg) rotateY(25deg); }
  50% { transform: rotateX(25deg) rotateY(-25deg); }
  75% { transform: rotateX(-25deg) rotateY(25deg); }
}

span {  
  display: block;
  font-size: 30vw;
  line-height: 75%;
  color: transparent;
  text-shadow:
    0 0 1px var(--color),
    0 0 50px var(--color),
    0 0 100px var(--color);  
  animation: colorSwap 2s linear infinite;
}
@keyframes colorSwap {
  25% { --color: cyan; }
  50% { --color: magenta; }
  75% { --color: lime; }
}

Output:

Thank you message for followers achieved.
Created by Kit Jenson. See live https://codepen.io/kitjenson/pen/KKqRzOP

See also: