Skip to content

Instantly share code, notes, and snippets.

@devendran-m

devendran-m/index.html

Created August 17, 2025 12:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devendran-m/f60fa5e13549a8d72d0a3363b620d708 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devendran-m/f60fa5e13549a8d72d0a3363b620d708 to your computer and use it in GitHub Desktop.
Download ZIP
ripple_effects_css
Raw
index.html
<body>
<h1>
<span>R</span>
<span>I</span>
<span>P</span>
<span>P</span>
<span>L</span>
<span>E</span>
</h1>
</body>
Raw
style.css
body {
height:100vh;
margin: 0;
background: #111;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
h1 {
display: flex;
gap: 5px;
font-size: 3rem;
}
h1 span {
display: inline-block;
animation: ripple 1.2s ease-in-out infinite;
}
h1 span:nth-child(1) { animation-delay: 0s }
h1 span:nth-child(2) { animation-delay: 0.1s }
h1 span:nth-child(3) { animation-delay: 0.2s }
h1 span:nth-child(4) { animation-delay: 0.3s }
h1 span:nth-child(5) { animation-delay: 0.4s }
h1 span:nth-child(6) { animation-delay: 0.5s }
@keyframes ripple{
0%, 100% {
transform: translateY(0) scale(1);
color: white;
}
50% {
transform: translateY(-15px) scale(1.2);
color: #00f7ff;
}
}
@devendran-m
Copy link
Author

devendran-m commented Aug 17, 2025

A simple ripple effect using HTML and CSS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment