Анимация при наведении курсора на текст - пример html js css

• HTML код


• CSS код
• Результат кода

<main>LINE</main>

@font-face {

  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")

    format("woff2");

  font-family: "Meta";

  font-style: normal;

  font-weight: normal;

}



body {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  background-color: #8357eb;

  width: 100vw;

  height: 100vh;

}



main {

  transition: all 0.5s;

  -webkit-text-stroke: 4px #d6f4f4;

  font-variation-settings: "wght" 900, "ital" 1;

  font-size: 15rem;

  text-align: center;

  color: transparent;

  font-family: "Meta", sans-serif;

  text-shadow: 10px 10px 0px #07bccc,

    15px 15px 0px #e601c0,

    20px 20px 0px #e9019a,

    25px 25px 0px #f40468,

    45px 45px 10px #482896;

  cursor: pointer;

}



main:hover {

  font-variation-settings: "wght" 100, "ital" 0;

  text-shadow: none;

}