Skip to content

Instantly share code, notes, and snippets.

@ritacse
Last active June 8, 2021 06:22
Show Gist options
  • Save ritacse/9631c45abf47a31a7fb6462950448e31 to your computer and use it in GitHub Desktop.
Save ritacse/9631c45abf47a31a7fb6462950448e31 to your computer and use it in GitHub Desktop.
<style>
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
</style>
/// HTML Code
This is <span class="blink">blinking</span> text.
@keyframes glowing {
0% {
background-color: #2ba805;
box-shadow: 0 0 5px #2ba805;
}
50% {
background-color: #49e819;
box-shadow: 0 0 20px #49e819;
}
100% {
background-color: #2ba805;
box-shadow: 0 0 5px #2ba805;
}
}
.btnExist { // this Button will glow
animation: glowing 1300ms infinite;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
font-family: cursive;
}
.glow {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
</head>
<body>
<h1 class="glow">GLOWING TEXT</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment