Created
May 16, 2018 02:19
-
-
Save LeaVerou/4ae19d84fe141f8748cd5cf5be4c48f8 to your computer and use it in GitHub Desktop.
Animated line headings
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Animated line headings | |
*/ | |
h1 { | |
display: flex; | |
align-items: center; | |
width: 100%; | |
box-sizing: border-box; | |
font: bold 250% Palatino, sans-serif; | |
text-transform: uppercase; | |
color: black; | |
} | |
@keyframes noflex { | |
to { | |
flex: 0; | |
} | |
} | |
h1::before, | |
h1::after { | |
content: ""; | |
background: currentColor; | |
height: .1em; | |
flex: 1; | |
margin: 0 .2em; | |
animation: noflex 2s ease-in-out infinite alternate; | |
} | |
h1::before { | |
margin-left: 0; | |
} | |
h1::after { | |
margin-right: 0; | |
animation-direction: alternate-reverse; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Line headings</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment