<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : YS_scale-rotation.html |
| Author : Yevheniia Shyrchenko |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 4vh;
overflow: hidden;
height: 100vh;
}
@keyframes rotate-columns {
/* defines how the text is rotated and enlarged at a certain point in the animation */
0% {
transform: rotateY(0deg) scale(1);
}
50% {
transform: rotateY(180deg) scale(3);
}
100% {
transform: rotateY(360deg) scale(1);
}
}
.column-container {
display: flex;
justify-content:space-evenly;
align-items: center;
height: 100vh;
font-family: 'Konsole';
}
.column {
/* defines how the animation will progress over one cycle of its duration */
display: flex;
flex-direction: column;
align-items: center;
animation: rotate-columns 6s linear infinite;
}
.box {
/* defines how the boxes look */
background-color: black;
padding: 10px;
border-radius: 0px;
}
.column p {
/* defines how the glyphs are shown */
font-size: 3em;
margin: 0;
letter-spacing: 0;
color: white;
}
.column:nth-child(2) {
/* defines when the animation will start */
animation-delay: 1s;
}
.column:nth-child(3) {
animation-delay: 2s;
}
.column:nth-child(4) {
animation-delay: 3s;
}
.column:nth-child(5) {
animation-delay: 4s;
}
</style>
<title>Your Page Title</title>
</head>
<body>
<div class="column-container">
<div class="column">
<div class="box"><p>H</p></div>
</div>
<div class="column">
<div class="box"><p>E</p></div>
</div>
<div class="column">
<div class="box"><p>L</p></div>
</div>
<div class="column">
<div class="box"><p>L</p></div>
</div>
<div class="column">
<div class="box"><p>O</p></div>
</div>
</div>
</body>
</html>