Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Nov 11, 2016
Embed
What would you like to do?
There is light
<h2>
<span>There's</span>
<span class="light">light</span>
<span> even in</span>
<span>the darkest</span>
<span>places</span>
</h2>
// Source is unknown!
// http://9gag.com/gag/10509/there-s-light-even-in-the-darkest-places
body {
background: #000;
padding: 2rem;
}
h2 {
font-family: 'Arial';
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 3rem;
line-height: 0.75;
}
span {
display: block;
}
span:not(.light) {
opacity: 0;
animation: flashText .5s ease-out alternate infinite;
}
span.light {
position: relative;
display: inline-block;
&:before {
position: absolute;
left: 0;
top: -10%;
width: 100%;
height: 120%;
background: #fff;
filter: blur(10px);
content: "";
opacity: 0;
animation: flash .5s ease-out alternate infinite;
}
}
@keyframes flash{
to {
opacity: 1;
}
}
@keyframes flashText {
to {
opacity: 0.15;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.