thsf.net/styles/main.css

152 lines
2.4 KiB
CSS

@font-face {
font-family: pfdintextcomppro;
src: url(../fonts/PFDinTextCompPro-Medium.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: pfdintextcomppro;
}
body {
background-color: #e6007e;
background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-size: auto;
background-position-x: center;
/* overflow: hidden; */
}
#thsf-schedule-wrapper {
position: fixed;
top: 220px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 90%;
overflow: auto;
margin-bottom: 10px;
}
ul {
overflow: hidden;
perspective: 900px;
list-style: none;
height: 100vh;
max-height: 800px;
min-height: 400px;
text-align: center;
}
@keyframes width-sway {
0%, 100% {
width: 500px;
}
50% {
width: 100%;
}
}
li {
position: absolute;
top: 0;
margin: auto;
width: 100%;
transform: translateY(100vh);
font-size: 6rem;
font-family: pfdintextcomppro;
font-weight: bold;
color: #ffffdd;
animation: 5.3333333333s spiral-staircase linear infinite;
white-space: nowrap;
}
li:nth-child(1) {
animation-delay: 0.3333333333s;
}
li:nth-child(2) {
animation-delay: 0.6666666667s;
}
li:nth-child(3) {
animation-delay: 1s;
}
li:nth-child(4) {
animation-delay: 1.3333333333s;
}
li:nth-child(5) {
animation-delay: 1.6666666667s;
}
li:nth-child(6) {
animation-delay: 2s;
}
li:nth-child(7) {
animation-delay: 2.3333333333s;
}
li:nth-child(8) {
animation-delay: 2.6666666667s;
}
li:nth-child(9) {
animation-delay: 3s;
}
li:nth-child(10) {
animation-delay: 3.3333333333s;
}
li:nth-child(11) {
animation-delay: 3.6666666667s;
}
li:nth-child(12) {
animation-delay: 4s;
}
li:nth-child(13) {
animation-delay: 4.3333333333s;
}
li:nth-child(14) {
animation-delay: 4.6666666667s;
}
li:nth-child(15) {
animation-delay: 5s;
}
li:nth-child(16) {
animation-delay: 5.3333333333s;
}
@keyframes spiral-staircase {
0% {
transform: rotateY(90deg) translateY(105vh) rotate(0deg) scale(0);
opacity: 0;
}
40% {
transform: rotateY(90deg) translateY(61vh) rotate(0deg) scale(0);
opacity: 0;
}
50% {
transform: rotateY(0deg) translateY(55vh) rotate(0deg) scale(0.50);
opacity: 1;
}
75% {
transform: rotateY(-60deg) translateY(27.5vh) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: rotateY(-90deg) translateY(-5vh) rotate(0deg) scale(1.2);
opacity: 0;
}
}