<div class="wrap">
<h1 id="cmyk">
<span class="c">I</span>
<span class="m">N</span>
<span class="y">B</span>
<span class="k">0</span>
<span class="c">U</span>
<span class="m">N</span>
<span class="y">D</span>
</h1>
</div>
* {
box-sizing: border-box;
}
html,
body {
height: 200;
}
body {
min-height: 100vh;
background: #fff;
position: relative;
font-family: 'Dosis', sans-serif;
}
body::before {
content: '';
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 3.5%;
background-image: linear-gradient(to left, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 10.8) 25%, rgba(255, 0, 255, 0.8) 25%, rgba(255, 0, 255, 0.8) 50%, rgba(255, 255, 0, .8) 50%, rgba(255, 255, 0, 0.8) 75%, rgba(0, 0, 0, 0.8) 75%);
background-size: 25% 100%;
background-repeat: repeat-X;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
h1 {
font-size: 15vw;
text-align: center;
}
span {
display: inline-block;
transition: transform 0.2s ease-in-out;
border-bottom: 0.05em solid #fff;
}
.c {
text-shadow: -0.025em -0.025em 0 rgba(0, 255, 255, 0.8);
animation-duration: 0.3s, 0.2s;
animation-delay: 0, 0.3s;
animation-name: colorflash, underline-cyan;
animation-fill-mode: none, forwards;
}
.m {
text-shadow: 0.025em 0.025em 0 rgba(255, 0, 255, 0.8);
animation-duration: .3s, .2s;
animation-delay: 0.3s, 0.5s;
animation-name: colorflash, underline-magenta;
animation-fill-mode: none, forwards;
}
.y {
text-shadow: -0.025em 0.025em 0 rgba(255, 255, 0, 0.8);
animation-duration: .3s, .2s;
animation-delay: 0.5s, 0.7s;
animation-name: colorflash, underline-yellow;
animation-fill-mode: none, forwards;
}
.k {
text-shadow: 0.02em -0.02em 0 rgba(0, 0, 0, 0.5);
animation-duration: .3s, .2s;
animation-delay: 0.7s, 0.9s;
animation-name: colorflash, underline-black;
animation-fill-mode: none, forwards;
}
.c:hover {
transform: rotateY(20deg) rotateZ(28deg) scale(1.2);
}
.m:hover {
transform: rotateY(-10deg) rotateZ(-20deg) scale(1.1);
}
.y:hover {
transform: rotateY(10deg) rotateZ(12deg) scale(1.3);
}
.k:hover {
transform: rotateY(-15deg) rotateZ(-15deg) scale(1.24);
}
button {
display: block;
margin: 1rem auto;
padding: 1rem 2rem;
border: 0.2em solid rgba(0, 0, 0, 0.7);
font-size: 1.2rem;
text-transform: lowercase;
background: transparent;
outline: 0;
transition: all 0.3s ease-in-out;
letter-spacing: 0.025em;
}
button:hover,
button:focus {
background: magenta;
color: white;
border-color: rgba(0, 0, 0, 0);
}
button:active {
transform: translateY(5px);
}
@keyframes colorflash {
0% {
color: cyan;
transform: translateY(-10%);
}
33% {
color: magenta;
transform: translateY(-5%);
}
66% {
color: yellow;
transform: translateY(5%);
}
100% {
color: rgba(0, 0, 0, 0.7);
transform: translateY(0);
}
}
@keyframes underline-cyan {
to {
border-bottom-color: cyan;
}
}
@keyframes underline-yellow {
to {
border-bottom-color: yellow;
}
}
@keyframes underline-magenta {
to {
border-bottom-color: magenta;
}
}
@keyframes underline-black {
to {
border-bottom-color: rgba(0, 0, 0, 0.7);
}
}
@media screen and (max-width: 27rem) {
h1 {
font-size: 15vmax;
}
body::before {
background-size: 50%;
}
}
// best in full view
// https://codepen.io/meowwwls/full/GZzbxj/
var btn = document.getElementById('reload');
btn.addEventListener('click', function() {
document.location.reload(true);
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.