Animation | WIth Pure Html And Css With Free Source Code On Website As Well As On Telegram Channel

The project "Hover effect with pure HTML and CSS" is a simple demonstration of creating interactive hover effects for elements on a web page using only HTML and CSS. The project showcases the use of CSS transitions and transforms to create visually appealing hover effects.

By incorporating hover effects, elements on the web page can respond to user interactions, adding an engaging and interactive element to the overall design. These effects are achieved by applying CSS styles to the selected elements.

Download Code Get Code On Github

Using the provided source code, you can study and analyze how the hover effects are implemented and customize them to fit your own design requirements. HTML and CSS provide a powerful combination for creating visually appealing and interactive web pages, and this project serves as a great example of how to leverage these technologies effectively.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodAtNow | Animated Variable Font (vanilla CSS only)</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<span>Hover me</span>
<span>Hover me</span>
<span>Hover me</span>
<!-- partial -->
  
</body>
</html>

The project's code is available for free on a Telegram channel, where users can access and download the source code. This allows developers and designers to implement similar hover effects in their own projects without having to start from scratch.

CSS

body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background: #11131e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  font-family: "Source Code Pro", monospace;
  font-size: 4em;
  color: aliceblue;
  font-weight: 200;
  will-change: font-weight;
}

span:hover {
  animation-name: getBold;
  animation-duration: 2500ms;
  animation-iteration-count: 1;
  cursor: pointer;
  font-weight: 900;
}

span:not(:hover) {
  animation-name: getThin;
  animation-duration: 2500ms;
  animation-iteration-count: 1;
  font-weight: 200;
}

@keyframes getBold {
  0% {
    font-variation-settings: "wght" 200;
  }
  100% {
    font-variation-settings: "wght" 900;
  }
}

@keyframes getThin {
  0% {
    font-variation-settings: "wght" 900;
  }
  100% {
    font-variation-settings: "wght" 200;
  }
}