145 lines
2.4 KiB
CSS
145 lines
2.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
perspective: 1000px;
|
|
background: #3693;
|
|
}
|
|
|
|
.year {
|
|
--duration: 1.5s;
|
|
--color: #147;
|
|
--shade: #57b;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: Chango, Arial, sans-serif;
|
|
font-size: 150px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(0, 1, 0, -360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes jump {
|
|
0%, 75%, 100% {
|
|
margin-top: 0;
|
|
}
|
|
50% {
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
|
|
.letter {
|
|
position: relative;
|
|
animation: rotate var(--duration) linear, jump var(--duration) linear;
|
|
atransform: rotate3d(0, 1, 0, 90deg);
|
|
width: 120px;
|
|
height: 110px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.letter div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
line-height: 110px;
|
|
color: var(--color);
|
|
|
|
}
|
|
|
|
.letter span {
|
|
position: absolute;
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%) rotateY(90deg);
|
|
display: block;
|
|
|
|
width: 12px;
|
|
background: var(--color);
|
|
}
|
|
|
|
.letter-2 span,
|
|
.letter-1 span{
|
|
top: 53%;
|
|
height: 95%;
|
|
}
|
|
|
|
.letter-0 span {
|
|
top: 54.25%;
|
|
left: 40%;
|
|
height: 98%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.letter div:nth-child(2) {
|
|
transform: translate3d(0, 0, 3px);
|
|
}
|
|
|
|
.letter div:nth-child(3) {
|
|
color: var(--shade);
|
|
transform: translate3d(0, 0, 6px);
|
|
}
|
|
|
|
.letter div:nth-child(4) {
|
|
transform: translate3d(0, 0, -3px);
|
|
}
|
|
|
|
.letter div:nth-child(5) {
|
|
color: var(--shade);
|
|
transform: translate3d(0, 0, -6px);
|
|
}
|
|
|
|
.letter-2 div::before {
|
|
content: "2";
|
|
}
|
|
|
|
.letter-0 div::before {
|
|
content: "0";
|
|
}
|
|
|
|
@keyframes changeYear {
|
|
0%, 25% { content: "1" }
|
|
25.5%, 100% { content: "2" }
|
|
}
|
|
|
|
|
|
@keyframes updateFilling {
|
|
0%, 25% {
|
|
top: 55%;
|
|
height: 95%;
|
|
}
|
|
25.5%, 100% {
|
|
top: 53%;
|
|
height: 95%;
|
|
}
|
|
}
|
|
|
|
.letter-1 div::before {
|
|
content: "1";
|
|
animation: changeYear var(--duration) calc(var(--duration) * 2.4) forwards;
|
|
}
|
|
|
|
.letter-1 span {
|
|
top: 55%;
|
|
height: 95%;
|
|
animation: updateFilling var(--duration) calc(var(--duration) * 2.4) forwards;
|
|
}
|
|
|
|
.letter:nth-child(1) { animation-delay: calc(var(--duration) * 0.6); }
|
|
.letter:nth-child(2) { animation-delay: calc(var(--duration) * 1.2); }
|
|
.letter:nth-child(3) { animation-delay: calc(var(--duration) * 1.8); }
|
|
.letter:nth-child(4) { animation-delay: calc(var(--duration) * 2.4); } |