Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blast text
<p>Good decisions come from experience. Experience comes from Bad decisions. The trick is to get the experience before the bad decisions get you. </p>
<span class="small">by : Someone Wise <br/>
<span class="vsmall">CodeMyUI</span><span>
var p = document.querySelector('p');
p.innerHTML = p.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span>$2</span>');
@import url('https://fonts.googleapis.com/css?family=Gelasio&display=swap');
body {
background: black;
color: white;
font: 3vw/1.2 'Gelasio', serif;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 55vw;
margin: 0 auto;
min-height: 100vh;
perspective: 200px;
animation: perspective 9s cubic-bezier(.35,.06,.92,.03) infinite;
@keyframes perspective {
0% { perspective: 100px; transform: scale(.5); }
100% { perspective: 10000px; transform: scale(1); }
}
}
p {
transform-style: preserve-3d;
}
span {
display: inline-block;
@for $i from 1 through 150 {
&:nth-child(#{$i}) {
transform: translateZ((random() * -1000px));
}
}
}
.small{
font-size: 30px;
}
.vsmall{
font-size: 20px;
}
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.