- let text = 'We Love to Play';
- let arr = text.split('');
h1(role='img' aria-label=text)
- arr.forEach(letter => {
span.letter(class=Math.random() > .5 ? 'over' : null) #{letter}
- });
View Compiled
$h: .125em;
body {
display: grid;
place-content: center;
margin: 0;
height: 100vh;
background: url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover
}
h1 {
position: relative;
padding: 0 .5*$h;
font: 900 9vw segoe script, purisa, comic sans ms, cursive;
&::after {
position: absolute;
top: calc(50% - .5*#{$h}); right: 0;
width: calc(50% + 50vw); height: $h;
border-radius: 0 $h $h 0;
background: crimson;
animation: slide 2s ease-out 1s backwards;
content: ''
}
}
@keyframes slide { 0% { transform: translate(-100%) } }
.over {
position: relative;
z-index: 1
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.