div.text
h1.glow neon text
View Compiled
@import url('https://fonts.googleapis.com/css?family=Warnes');
:root {
--animation-time: 2s;
}
html, body {
height: 100%;
}
body {
background-color: black;
}
* {
margin: 0;
padding: 0;
font-family: 'Warnes', cursive
}
.text {
margin-top: 100px;
text-align: center;
}
h1 {
color: #FF00DE;
letter-spacing: 8px;
}
.glow {
text-shadow: 0 0 20px #FF00DE;
animation: 3s glow-effect infinite alternate;
}
.glow:hover {
color: white;
animation: none;
text-shadow: 0 0 30px white, 0 0 60px white, 0 0 70px white, 0 0 90px white;
}
@keyframes blink {
100% {
color: white;
animation: none;
text-shadow: 0 0 30px white, 0 0 60px white, 0 0 70px white, 0 0 90px white;
}
}
@keyframes glow-effect {
100% {
text-shadow: 0 0 30px #FF00DE, 0 0 40px #FF00DE, 0 0 60px #FF00DE;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.