Create Shining Text Animation Effects with HTML and CSS

Learn how to create shining text animation effects using HTML and CSS. This video covers everything from creating the basic structure of the animation to adding effects like glow, blur, and shadow.

Source Code:
https://github.com/kaizhelam/Shining-Text-Animation-Effects.git

index.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>Shining Text Animation</title>
</head>
<style>
body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
p{
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate{
  0%{
    background-position: -500%;
  }
  100%{
    background-position: 500%;
  }
}
</style>
<body>
  <p>Shining Text Animation Effects</p>
</body>
</html>

#html #css

youtube.com

Create Shining Text Animation Effects with HTML and CSS