HTML
<div class="stage">
<div class="wire"></div>
<div class="wire wire--shadow"></div>
<div class="text">
<div class="text__top">
<span class="letter">T</span>
<span class="letter letter--hole-top">I</span>
<span class="letter">C</span>
<span class="letter letter--front">K</span>
</div>
<div class="text__bottom">
<span class="letter">T</span>
<span class="letter letter--hole-bottom">O</span>
<span class="letter">C</span>
<span class="letter">K</span>
</div>
</div>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:700');
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
font-family: 'Fira Mono', monospace;
background: linear-gradient(to top right, #524ad0 10%, #D099FA);
}
.stage {
position: relative;
display: flex;
align-items: center;
}
.text {
position: relative;
font-size: 3em;
@media (min-width: 768px) {
font-size: 7em;
}
color: #5437E3;
}
.text__top {
position: relative;
display: flex;
flex-wrap: wrap;
}
.text__bottom {
position: relative;
display: flex;
margin-left: 1.55em;
}
.letter {
display: inline-block;
padding: 0 .1em;
line-height: 1;
}
.letter--hole-top {
opacity: 0;
padding: 0 0em;
}
.letter--hole-bottom {
opacity: 0;
padding: 0 .13em;
}
.letter--front {
position: relative;
z-index: 3;
}
.wire {
z-index: 2;
position: absolute;
left: 90px;
top: -40px;
background: yellow;
height: 63%;
width: 8px;
transform-origin: top center;
animation: swing 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
@media (min-width: 768px) {
height: 65%;
left: 170px;
width: 20px;
}
&:after {
content: '';
position: absolute;
top: 99%;
left: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
border: 6px solid yellow;
transform: translate(-50%, 0);
@media (min-width: 768px) {
width: 90px;
height: 90px;
border-width: 18px;
}
}
&--shadow {
opacity: .3;
z-index: 1;
left: 90px;
background: rgba(0,0,0, .4);
box-shadow: 0 0 30px rgba(0,0,0, .8);
animation: swingShadow 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
@media (min-width: 768px) {
left: 170px;
}
&:after {
top: 100%;
border-color: rgba(0,0,0, .4);
filter: blur(5px);
}
}
}
@keyframes swing{
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes swingShadow{
0% {
transform: rotate(9deg);
}
50% {
transform: rotate(-23deg) scale(1.05);
}
100% {
transform: rotate(9deg);
}
}
