Blast text
A Pen by Saijo George on CodePen.
A Pen by Saijo George on CodePen.
<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; | |
} |